Often when we talk about accessibility problems, we end up talking about a number of different errors that all boil down to a missing accessible name: form fields without labels, images without alts, icon buttons without readable text, and many more. Written by Sarah Higley.
A missing or incorrect accessible name in some form or other is right up there with poor color contrast in the list of most common accessibility errors across the web.
More recently, a greater awareness of accessibility and an increase in the use of ARIA attributes has resulted in a sort of reverse naming problem, where elements that cannot or should not be named get artificial names through ARIA. While an improperly added name is a step up from a missing one, it will often give the illusion of accessibility while masking an underlying problem that remains unaddressed.
Here’s a non-comprehensive list of terms and concepts that all boil down to talking about names:
- labels, the
- table captions
- image alt text
- the
- an SVG
element</li> <li>aria-label and aria-labelledby</li> </ul> <p>Not every element can support an accessible name, and even among those that can, not every one should. To learn about few general categories of elements that should always be named read the article in full. Excellent!</p> <a href="https://sarahmhigley.com/writing/whats-in-a-name/" target="_blank" class="post-read-more">[Read More]</a> <hr> <h4> <span class="label label-default">Tags</span> <a href="/tags/web-development"><span class="label label-success">web-development</span></a> <a href="/tags/ux"><span class="label label-success">ux</span></a> <a href="/tags/software"><span class="label label-success">software</span></a> <a href="/tags/css"><span class="label label-success">css</span></a> <a href="/tags/frontend"><span class="label label-success">frontend</span></a> </h4> </div> </article> <ul class="pager blog-pager"> <li class="previous"> <a href="https://www.codeisgo.com/post/how-open-source-medicine-could-prepare-us-for-next-pandemic-2020050301/" data-toggle="tooltip" data-placement="top" title="How open-source medicine could prepare us for the next pandemic">← Previous Post</a> </li> <li class="next"> <a href="https://www.codeisgo.com/post/utilising-hashes-in-hiera-to-reduce-code-complexity-2020050501/" data-toggle="tooltip" data-placement="top" title="Utilising hashes in Hiera to reduce code complexity">Next Post →</a> </li> </ul> </div> </div> </div> </div> <footer> <div class="container beautiful-jekyll-footer"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1"> <ul class="list-inline text-center footer-links"> <li> <a href="https://twitter.com/CodeIsGo_com" title="Twitter"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> </span> </a> </li> <li> <a href="/pages/contact/" title="Contact Us"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-envelope fa-stack-1x fa-inverse"></i> </span> </a> </li> <li> <a href="https://www.codeisgo.com/index.xml" title="RSS"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-rss fa-stack-1x fa-inverse"></i> </span> </a> </li> </ul> <p class="copyright text-muted"> <a href="/pages/privacy/" title="Privacy"> <i class="fa fa-bullseye"> Privacy</i> </a> / <a href="/pages/cookies/" title="Cookies"> <i class="fa fa-cloud"> Cookies</i> </a> / <a href="https://www.lucasoft.info/slugify" title="Slugify" target="_blank"> <i class="fa fa-bolt"> Slugify</i> </a> </p> <p class="copyright text-muted"> CodeIsGo part of <a href="https://www.lucasoft.info" target="_blank">lucasoft.co.uk</a> • 2024 • <a href="https://www.codeisgo.com">CodeIsGo.com</a> </p> <p class="theme-by text-muted"> At the heart of web development. Redditch, West Midlands, United Kingdom. </p> <p class="theme-by text-muted"> Theme by <a href="http://deanattali.com/beautiful-jekyll/">beautiful-jekyll</a> </p> </div> </div> </div> </footer> <script async src="https://www.codeisgo.com/js/jquery-1.11.2.min.js"></script> <script async src="https://www.codeisgo.com/js/bootstrap.min.js"></script> <script async src="https://www.codeisgo.com/js/main.js"></script> <script type="application/javascript"> var doNotTrack = false; if (!doNotTrack) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-68415661-1', 'auto'); ga('send', 'pageview'); } </script> </body> </html>