Semantic HTML for a conscient Development.

In matters of web pages development or construction, there are several approaches: from scratch and implementing everything to modular building with almost drag and drop. The reasons for choosing the strategy for the implementation, in my opinion can be seen as a two way factor:

• Available budget
• Complexity of the functionalities in the web page.

There are a great number of tools that allow us to build web pages, from static to transactional, without really looking at the HTML generated underneath. On one hand, this is one good thing because it makes web development reachable to a more vast audience. But I would like to ask: are those tools generating complying HTML so assistive technologies can actually understand the structure of the page or event for search engine scraping?

Try closing our eyes behind a door. If someone says “Open the door”, you will look for the locker and try to open. If I say “You have a movable obstacle in your front”, you must pull or push it so it can move away and you can go forward.

“Open the door” has a semantic meaning, more than those two words. It can be made in many ways, but clearly it tells you the meaning of the action. Describing the door and the movement with generic description is also possible, but it will take much time, to make it clear and to understand.

 

Question: What are HTML semantic tags? 

Answer: They are tags with a specific meaning. Those tags allow humans and not humans to have a meaningful overview on the page structure. 

A semantic element clearly describes its meaning to both the browser and the developer.

Since HTML5 (2014 wow) new semantic tags like header, footer, nav, etc. were introduced. This is intended to have tags that clearly describe the base structure of the page.

The structure of a page can be very confusing when we hear the description based on his components.

Try listening to the description of your favorite web page with a screen reader and let me know how it feels: can you understand the page structure? Can you navigate the page with the help of the instructions of the screen reader and the keyboard? Can this interaction be simplified?

Yes, I feel like I'm throwing a stone in the air and it (literally) will come down in my head. I wasn't always aware of this kind of issue. 

 

The first time this concern drove into my mind was in a talk named "HTML: how to make it loveliness" presented by Bruce Lawson at Landing Festival 2019 Lisbon. 

The idea that I wasn't getting the job done by not even considering that my work was the most accessible possible, stroke me deeply. You can check his website here and if you have curiosity, see the video with the presentation. 

Well, I would suggest assisting one in loco because he is a great speaker but, at least you can get an overall idea.

 

Later I watched another relevant presentation on this topic at BarcampLX 2019, “Screen reader internals: a crash course on accessibility for the fearless presented” by Rui Batista. 

Beyond his experience with screen readers, the catchy for me in the presentation were the Accessibility APIs topic and how important they are when developing a system. You can watch it here. 

Since then, from time to time I move around some sites with a screen reader (eyes closed) to see if I can understand the structure and the actions presented to me. Knowing that I'm not a real user for this kind of software interaction because I don't have my other senses so well developed, I think that there are a great deal of little changes that can benefit any user. 

 

For example, sometimes I found difficult to understand what a button really does.

Example of a web page component with an access button

 

So, “Access” is a button to access “About something”. But when the reader gets to the button description, it only reads "Access". Having the visual context, “Access” is enough. When you are "just" listening, it would be nice to hear "access about Something". 

Have you heard or read about the Accessible Rich Internet Applications (ARIA) initiative? You can check it here.

 

It “defines a way to make Web content and Web applications more accessible to people with disabilities” .

 

In the example before, using aria-label would help: aria-label= “Access About something”. It’s a property that the screen reader knows how to read and will do so instead of the original text. It won’t be shown in the browser.

Unfortunately not every browser reads the content of this label translated to the page language. 

I would like to raise you some questions...

Maybe you would like to share the answers with me or just think and talk about them with your colleagues; it’s for all who are responsible for webpage development, from developers to product owners, from testers to analysts, and so on...

• Do the tools that you use, generate semantic HTML?

• Do you use accessibility tests?

• Is your last Project reachable to a large scope of people?

I truly believe that building a conscience for an inclusive world comes with everyday actions, tiny and consistent actions. 

 

Not being quite a digital activist, I believe that community pressure drives tools to change but first we must change the way we are building our applications so, at least, we consider the accessibility concerns in the process (design, development, tests and management).

 

 

Alcindo - Software Engineer 

 

Side note

When I was ready to publish a thought came: Is this blogue compliant with accecibility guidelines? 🙈. In portuguese we have a saying for this: "Casa de Ferreiro, espeto de pau".