An accessible website can be used by people with visual, hearing, physical, or cognitive impairments. Starting in June 2025, accessibility won’t just be best practice \u2013 it will be legally required under the European Accessibility Act (EAA). You can read more about that in our blog<\/a> dedicated to the topic.<\/p>\n\n\n\n For this project, we focused on a website where accessibility truly matters \u2013 drmaxnapredpis.sk<\/a>. Health-related platforms must be accessible to everyone, especially older users or people with disabilities who rely on digital access to vital information.<\/p>\n\n\n\n It all started with an accessibility audit. This gave us a clear picture of where we needed to improve and pointed us toward the first concrete steps. We focused on four key areas: semantic HTML structure, keyboard navigation, ARIA attributes, and color contrast.<\/p>\n\n\n\n First, we improved the HTML structure to make it more meaningful \u2013 not just for users, but also for assistive technologies like screen readers. We used semantic HTML5 tags to improve context and help both users and search engines better understand the content.<\/p>\n\n\n\n How to do it:<\/strong><\/p>\n\n\n\n These changes create a clearer structure and enhance the experience for users relying on assistive tools.<\/p>\n\n\n\n \u274c\u00a0 Before:<\/strong><\/p>\n\n\n\n \u2705\u00a0 After:<\/strong><\/p>\n\n\n\n Dynamic elements like modals and dropdowns can be difficult for screen readers to interpret. ARIA attributes add extra layers of meaning that standard HTML doesn\u2019t provide.<\/p>\n\n\n\n How to do it:<\/strong><\/p>\n\n\n\n \u274c\u00a0 Before:<\/strong><\/p>\n\n\n\n \u2705\u00a0 After:<\/strong><\/p>\n\n\n\n Keyboard navigation is essential for users who can’t use a mouse. Ensuring that all interactive elements are accessible via the keyboard greatly improves usability.<\/p>\n\n\n\n How to do it:<\/strong><\/p>\n\n\n\n Strong color contrast is crucial for users with low vision or color blindness. If the contrast is too weak, content becomes hard to read and navigate.<\/p>\n\n\n\n How to do it:<\/strong><\/p>\n\n\n\n To ensure that our changes actually worked, we tested them using several tools. Here are the ones that helped us the most:<\/p>\n\n\n\n Improving the Dr.Max prescription website taught us that accessibility isn\u2019t a one-time task \u2013 it\u2019s a continuous process. From semantics to testing, every step brought us closer to a website that truly serves everyone. We see accessibility as a core part of building high-quality digital products, and we\u2019ll continue integrating it into all our projects to make sure they’re usable and inclusive by design.<\/p>\n\n\n\n An accessible website is one that can be used by everyone \u2014 including people with visual, auditory, physical, or cognitive disabilities. It includes proper HTML structure, keyboard navigation, readable color contrast, and well-implemented ARIA attributes.<\/p>\n<\/details>\n\n Starting June 2025, the European Accessibility Act (EAA) will apply to many commercial websites \u2014 including e-commerce, banking, and healthcare portals. Accessibility also improves UX and expands your reach to a wider audience.<\/p>\n<\/details>\n\n Start with an accessibility audit to identify critical issues. Then focus on improving semantic HTML, enabling full keyboard navigation, enhancing color contrast, and adding ARIA attributes for dynamic elements like modals or dropdowns.<\/p>\n<\/details>\n\n Commonly used tools include Firefox Accessibility Inspector, ARIA DevTools, Silktide, and axe DevTools. Each one helps detect different accessibility issues \u2014 from structure to contrast to dynamic behavior.<\/p>\n<\/details>\n\n Start with small improvements \u2014 clear HTML structure, tab navigation, and visible contrast already make a big difference. You can also rely on external audits or consultations to set a good foundation for your team.<\/p>\n<\/details>\n","protected":false},"excerpt":{"rendered":"Web accessibility isn’t just about checking legal boxes \u2013 it’s about making sure everyone, regardless of their abilities,…","protected":false},"author":51,"featured_media":7571,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":""},"categories":[199],"tags":[802,811,809,806,810,804,801,807,330,590,805,800,803,808,215,604,592],"_links":{"self":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7566"}],"collection":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/users\/51"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/comments?post=7566"}],"version-history":[{"count":2,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7566\/revisions"}],"predecessor-version":[{"id":7632,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/posts\/7566\/revisions\/7632"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media\/7571"}],"wp:attachment":[{"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/media?parent=7566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/categories?post=7566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.bart.sk\/en\/wp-json\/wp\/v2\/tags?post=7566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Accessibility in action<\/strong><\/h2>\n\n\n\n
1. Semantic HTML structure<\/strong><\/h3>\n\n\n\n
\n
<div><\/code> and <span><\/code> tags with semantic HTML5 tags like <header><\/code>, <nav><\/code>, <main><\/code>, <article><\/code>, or <footer><\/code> based on content type.<\/li>\n\n\n\n<h1><\/code> followed by logical heading levels (<h2><\/code>, <h3><\/code>, etc.).<\/li>\n\n\n\n<label><\/code> tags with the for<\/code> attribute in forms for clarity.<\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/03\/carbon.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/03\/carbon-3.png\")
<\/figure>\n\n\n\n2. ARIA attributes<\/strong><\/h3>\n\n\n\n
\n
role=\"navigation\"<\/code> or <nav><\/code> to define main navigation.<\/li>\n\n\n\naria-live=\"polite\"<\/code> to notify users about dynamic changes (like updates in the shopping cart).<\/li>\n\n\n\naria-expanded<\/code> and aria-hidden<\/code> to indicate whether elements are visible or collapsed.<\/li>\n\n\n\naria-label<\/code>\u00a0for a more descriptive label.<\/li>\n<\/ul>\n\n\n\n![\"\"](\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/03\/carbon-4.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/blog.bart.sk\/en\/wp-content\/uploads\/2025\/03\/carbon-5.png\")
<\/figure>\n\n\n\n3. Keyboard usability<\/strong><\/h3>\n\n\n\n
\n
tabindex<\/code> as needed.<\/li>\n\n\n\n4. Color contrast<\/strong><\/h3>\n\n\n\n
\n
5. Testing matters<\/strong><\/h3>\n\n\n\n
\n
Accessibility is a journey, not a destination<\/strong><\/h2>\n\n\n\n
FAQ: Web Accessibility in Practice<\/h2>\n\n\n\n
What does it mean for a website to be accessible?<\/summary>\n
Why should I care about accessibility if I don\u2019t work in the public sector?<\/summary>\n
What are the first steps to improve accessibility on my website?<\/summary>\n
What tools can I use to test accessibility?<\/summary>\n
What if I don\u2019t have an accessibility expert on my team?<\/summary>\n