Join our community of software engineering leaders and aspirational developers. Always
stay in-the-know by getting the most important news and exclusive content delivered
fresh to your inbox to learn more about at-scale software development.
REQUIRED
It seems that you've previously unsubscribed from our newsletter
in the past. Click the button below to open the re-subscribe form
in a new tab. When you're done, simply close that tab and continue
with this form to complete your subscription.
The New Stack does not sell your information or share it with
unaffiliated third parties. By continuing, you agree to our
Terms of Use and
Privacy Policy.
Welcome and thank you for joining The New Stack community!
Please answer a few simple questions to help us deliver the news and resources you are interested in.
REQUIRED
REQUIRED
REQUIRED
REQUIRED
REQUIRED
Great to meet you!
Tell us a bit about your job so we can cover the topics you find most relevant.
REQUIRED
REQUIRED
REQUIRED
REQUIRED
REQUIRED
REQUIRED
Welcome!
We’re so glad you’re here. You can expect all the best TNS content to arrive
Monday through Friday to keep you on top of the news and at the top of your game.
What’s next?
Check your inbox for a confirmation email where you can adjust your preferences
and even join additional groups.
Follow TNS on your favorite social media networks.
Try our new 5 second poll. It's fast. And it's fun!
What’s Slowing You Down?
What is your biggest inhibitor to shipping software faster?
Complicated codebase and technical debt.
QA, writing tests, and debugging.
Waiting for PR review or stakeholder approval.
I'm always waiting due to long build times.
Rework due to unclear or incomplete specifications.
Inadequate tooling or infrastructure.
Other.
We'd love to hear what you think.
If you want to see how accessible your website really is, visit it using a screen reader, advised JavaScript and React developer and independent contractor Cory House.
House presented “Building Accessible Web Apps” during CodepaLOU, a regional developer conference hosted in Louisville, Ky. last month.
“Screen readers are often used by people with visual impairments so if we’re gonna be real about this, how about we experience that whole situation?” House said.
He deployed VoiceOver, which is the screen reader that’s built into Macs, to read a simple website he’d designed. Despite its simplicity, it was impossible to discern images on the page or what a user was supposed to enter in the text field.
House shared HTML markup tags that, when inserted into the page, would go a long way towards making it more accessible to users. The first problem he identified in the site? The HTML tag itself is missing, tagging it as an English-language site.
The Rotor Friendly Experience
To show how badly his sample site performed for assisted technology, House introduced the VoiceOver’s rotor. A rotor is used to quickly navigate apps and the web by moving backward and forward through links, buttons, headings and other navigation tools.
“Once I found out about the rotor, it finally opened my eyes to the fact that navigating a website can actually be done really quickly. using assistive tools,” House said.
It’s like scanning with your eyes for headings or clickable images, he said. Rotors are built into VoiceOver and other assistive technologies that allow users to view the site in different ways. To assist the rotor, be sure that all links, headings, and buttons are named. It’s also helpful if headings are nest appropriately, with only one H1 header, followed by a few H2 headers and so on if needed.
Create Landmarks
Imagine you were dropped into Washington, D.C. and there were no landmarks — no White House, no Washington Monument, nothing to identify it as the Capitol, he said.
Landmarks function in rotors the same way and identify navigations and other sections of the website. Those sections have to be identified using semantic markup.
“Now, what I also want to point out is, there’s another section that would normally show up in the rotor called landmarks,” he said. “Landmarks aren’t showing up right now, because my site is built so badly that it has no landmarks.”
Developers will often use the <div> tag but that doesn’t help assistive technologies — it basically tells users nothing about the page. Instead, a <nav> tag should be used to define a set of navigation. Then, VoiceOver can identify the navigation as such and identify it as one of the site’s landmarks.