How has the recent turmoil within the OpenAI offices changed your plans to use GPT in a business process or product in 2024?
Increased uncertainty means we are more likely to evaluate alternative AI chatbots and LLMs.
No change in plans, though we will keep an eye on the situation.
With Sam Altman back in charge, we are more likely to go all-in with GPT and LLMs.
What recent turmoil?
Frontend Development / Software Development

HTML Markup Tips for Developing Accessible Websites

Improving HTML markup can make websites more accessible for assisted technology and help developers with automated testing.
Sep 5th, 2022 3:00am by
Featued image for: HTML Markup Tips for Developing Accessible Websites

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

Apple's VoiceOver utility.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.

Group Created with Sketch.
THE NEW STACK UPDATE A newsletter digest of the week’s most important stories & analyses.