How to Write HTML Code for Screen Readers: 6 Best Tips

And developing a website with accessibility in mind means precisely that: to write your HTML code for screen readers. For those website visitors who depend on assistive technologies to fully enjoy the user experience delivered there.

Therefore, the way you'll configure your HTML elements will have a sure impact on your website's overall accessibility: good or bad.

In this respect, here's a checklist of the most effective (and handiest) ways to make your HTML elements fully visible and comprehensible to screen readers:

1. Provide Alternate Text for Every Image on Your Website

By far the handiest way to write HTML code for screen readers: just grow a habit of adding a succinct, yet perfectly comprehensive “Alt text” description to every new and old image on your website.

Make it descriptive enough, but do look out for overly specific (and long) descriptions. Keep in mind to provide context...

You'd thus prevent awkward situations where the assistive technology would just let that website visitor know that... there's an image on that page.

2. Writing HTML Code for Screen Readers: Use ARIA Attributes

One of the best HTML accessibility best practices is to add ARIA (Accessible Rich Internet Applications) to your HTML elements.

Why bother?

Because this way you're providing visually-impaired users with more information about specific elements on a web page

Take this example: the “role” attribute gives more context; it makes it easier for the screen reader (and the assisted user implicitly) to see what that element's “role” is in the context of that specific web page.

Just add the “navigation” value to that “role” attribute and the screen reader can then interpret the HTML element as being a... menu. And then present the user with all the options listed there.

Something intuitive for a user, but not so much for a visually-impaired one.

And this is but one of the many functions for ARIA attributes that you could add to your HTML code to enhance its accessibility.

3. Declare A Page's Language in HTML

You can and should do that via HTML.

This way, if your website's accessed:

from a different country
by a visitor with different language settings

… the screen reader “detecting” its default language will be quick to translate it.

Note: if you have snippets of text in a language different from the default one on your website, remember to add a new language tag to each snippet.

This way, you'll be signaling to screen readers that those specific parts should be translated accordingly.

4. Keep Your Links Short, but Not Too Short

Try to find that ideal balance between confusingly long and ineffectively short text for your links.

It's one of the “trickiest” parts of writing HTML code for screen readers:

if you use too many words, since the link will get read out loud by the screen reader, it might just confuse the visitor in question
if you make it too short, those users who rely on screen readers but still use their mouses to navigate websites might just... miss it

5. Use Semantic Tags: Make Your Content Readable and Understandable

What do you think of when you say “semantic tags”?

Tags like <b>, for bold text (and, therefore important information) or <i> for italicized text (which might indicate a quote) might be the first the come to your mind, right?

But still, these are indicators for how the text should be displayed. And that's irrelevant for visually-impaired users...

By comparison, 100% semantic tags, like <strong> and <em> indicate to the screen readers how that text should be interpreted. They're valuable “stage directions” on how it should be read to enhance the users' understanding.

6. Structure Your Pages so They... Make Sense to Screen Reader Users

Writing HTML code for screen readers means also structuring your web pages with accessibility in mind.

So, ask yourself common questions like:

when a visitors tells his/her screen reader to jump to the main context section on a page, are the links there short enough not to confuse him/her and long enough not to... miss them?
does that main context make sense to someone who can't interpret visual details like color scheme, layout, route of navigation?

Would he/she still be able to make sense of your web page's structure?

The END!

Needless to add that the list of ways that you could tweak your HTML code for screen readers, for enhancing accessibility, is a... never-ending one.

Start by focusing on these 6 aspects that will help you develop the right mindset for accessibility then... keep adding on more techniques.

We do Web development

Go to our Web development page!

Visit page!

Recommended Stories

CSS HTML Javascript Tips

How to Create an Angular Project with Angular CLI in 5 Simple Steps

About to build your very first Angular app? Then you must be planning to create an Angular project with Angular CLI, right? The much-acclaimed tool that the Angular team built precisely to jumpstart the whole development process. … to have a simple app scaffolded, generated and deployed in no time, by entering just a few commands (so they say, at least). And since I'm sure that you don't want to waste these bundles of convenience by letting yourself tangled up in overly complex explanations instead, I've kept things simple with this guide. So, here's how you create and run your first Angular project via the Angular command-line interface: 1. But How Precisely Can Angular CLI Jumpstart Your App's Development Process? Take this command-line interface as a starter kit “present” that the Angular team has nicely wrapped for you: it's practically geared at empowering you to get up and start developing a new Angular app in no time it takes just one short command to generate a default Angular project that would include all the needed dependencies (in the node_modules folder), as well as testing files for each component Now, this is what I call a major kickstart! It's got you covered from the stage of setting everything up, to creating the Angular project itself, to testing it and finally deploying it. Other key usages of the Angular CLI that we're not going to focus on in this tutorial here are: real-time server maintenance and support building applications for production adding new features to your existing app running tests on your application units 2. Setting It Up: Install Angular CLI Globally Before you jump to the part where you create an Angular app using Angular CLI, you need to install the command-line interface itself. Globally! And this is the “power” command to enter in your terminal with the npm installed: npm install -g @angular/cli Notes: if you already have the CLI installed, make sure it's the latest version if you need to update it, these are the commands to enter: npm uninstall -g angular-cli npm uninstall --save-dev angular-cli And there's more! A few more must-have dependencies that you need to make sure that are already installed and upgraded to their latest versions: Node.js: v6.9.x + npm: 3.x.x + 3. Create an Angular Project With Angular CLI With your command line interface ON, use it to enter THE one and only command that will generate a new Angular project for you. One incorporating, by default, all the needed dependencies: ng new ng-yourproject Tada! A “yourproject” named directory has just been generated. That's where your new Angular project — along with all the requested dependencies — gets stored. Eager to test it out? Just run the following command in your terminal: ng serve Your Angular app will then get built and served up to localhost:4200. Feel free to open this URL in your browser and it's the here-below screen that you should be able to see: Basically, it's the default application shell itself rendered by the CLI. 4. “Deconstructing” Your New Angular Project: What Does It Include? Now, before you go ahead and do your “tweaking” on your newly created app, let's see what you've got in there! What are the elements that the CLI has generated for you to help you jump to development right out of the box? For this quick “scan”, open your Angular project in your IDE of choice and start “exploring” your src/folder: src/* styles.css any styles that you'll plan to apply globally, it's this file that you can add them to; and it's here, as well, that you can import new .css files (Bootstrap or any other styling frameworks of your choice) index.html where your Angular app gets started src/app/* app.component.ts this is where your app's one and only (for now at least) component gets stored app.module.ts the modules Angular needs for managing your app's components note: @NgModule marks the class file as a module and this is what makes it similar to @Component 5. Create a New Component Remember your “one and only component” that I mentioned during the previous “inventory” of all the “bunch of stuff” that CLI has generated in your project? Well, how about creating a new one now? One that would load under that root component? Just run the following command to generate it: ng generate component the-quote Next, time to “show it off” in your browser: <h3>{{myQuote.quote}}</h3> <small>- {{myQuote.by}}</small> Add the app-the-quote selector to the root component that the CLI generated in your Angular project: <h1> {{title}} </h1> <app-the-quote></app-the-quote> 6. Apply External Styling Now you do agree that when you create an Angular project with Angular CLI applying styling is a key step. So, let's add your favorite CSS framework to your new application! Me, it's Bulma that I'll be using in this tutorial here: npm install bulma --save With our CSS framework installed, we'll need to enable it to load the CSS file into our Angular app. For this, just place the relative path within the .angular-cli.json file., to the file in the styles array more precisely. ... "styles": [ "../node_modules/bulma/css/bulma.css", "styles.css" ], ... “Tempted” to display some icons now, as well? Then go ahead and add the font-awesome library as cdn link. For this, just include the stylesheet right into your index.html: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> Et voila! This is how you create an Angular project with Angular CLI! What do you think? Is the Angular command-line interface an extremely useful tool to jumpstart your project with or did you expected your “starter kit” to include, right out-of-the-box, more elements to get you started? ... Read more

RADU SIMILEANU / May 25'2018

CSS Design HTML Javascript Tips Web Design

How to Use Bootstrap with Angular 4? Here Are 3 Ways to Add It To Your Project

Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely? How do you properly integrate it into your Angular 4 CLI project? Great news: you have not just one, but 3 options at hand for adding it! Let me get into details: On Using Bootstrap in Your Front-End Development Process Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific. After all, it's the most popular framework for styling websites built in HTML, CSS and modern web & mobile JavaScript frameworks (like Angular here): It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”. And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4: Step 1: Create a New Angular Project Using Angular CLI The very first step to take is obviously setting up a brand new project. Use the Angular Command Line Interface to generate it. But first, install it to on your system: $ npm install -g @angular/cli It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project. For doing this, just type the following command in your CLI: $ ng new myproject Next, feel free to change into that specific directory and to turn on the web server: $ cd myproject $ ng serve “App works!” This is the message that you should be seeing in your browser right now. Step 2: Install Bootstrap to Your Project Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well. And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4. Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It Option 1: Install Bootstrap from CDN And there are 2 particular files that you'll need to install from CDN into your project: the Bootstrap CCS file the Bootstrap JavaScript file Note: keep in mind to add the jQuery JavaScript library file, as well! Next, open the src/index.html file and insert the following: the <link> element to add the Bootstrap CSS file at the end of the head section a <script> element for adding jQuery at the bottom of the body section a <script> element for inserting the Bootstrap JS file at the bottom of the body section Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try: open the src/app/app.component.html enter the following code there: <div class="container"> <div class="jumbotron"> <h1>Welcome</h1> <h2>Angular & Bootstrap Demo</h2> </div> <div class="panel panel-primary"> <div class="panel-heading">Status</div> <div class="panel-body"> <h3>{{title}}</h3> </div> </div> </div> And it's the following message that this HTML template code should trigger in your browser: “app works!” Note: go for a Bootstrap theme of your choice; once you've downloaded it (from Bootswatch.com for instance), its bootstrap.min.css file will get instantly opened up in your browser. Just copy the file's URL and use it to replace the string assigned to the href attribute of the <link> element, in the index.html file. And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now! Option 2: Install Bootstrap using NPM And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma! Simply enter: $ npm install bootstrap@3 jquery –save It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory. Moreover, it will include these 2 dependencies in the package.json file, as well. Once properly installed, you can find both packages at: node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery/dist/jquery.min.js Note! You have 2 options for integrating those files into your Angular 4 project: add the file paths to the script array and to the file path of the angular-cli.json file add the corresponding <script> and <link> elements to your index.html file Option 3: Add NG-Bootstrap to Your Project The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based. Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package. For this, just enter the following command in your Angular 4 project directory: npm install --save @ng-bootstrap/ng-bootstrap Next, make sure you also install Bootstrap 4 to your project: $ npm install bootstrap@4.0.0-alpha.6 And, the final step is to add the following files: jquery.min.js bootstrap.min.js bootstrap.min.css … to your .angular-cli.json file Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package. To do this, just type the following import statement into app.module.ts: import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array. And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule: either in your project's child modules or in your the root module itself … in this article here on Using Bootstrap with Angular. Using The NG-Bootstrap Components: Which Are They? With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components. To leverage them in your app.component.html. Speaking of which, here are the components at hand: Accordion Alert Rating Tabs Carousel Progressbar Collapse Datepicker Buttons Pagination Typeahead Popover Timepicker Dropdown Modal Tooltip The END! Does this answer your “How to Use Bootstrap with Angular 4” question? Which method of adding this front-end framework to your project is more suitable for you? ... Read more

Silviu Serdaru / Apr 30'2018

HTML Javascript Tips

How React Virtual DOM Works: Why Is It (So Much) Faster than the “Real” DOM?

What's the deal with the virtual DOM? How React virtual DOM works precisely? It's significantly faster, without question, and it brings a whole series of benefits to coding. How come? Which efficiency issues of the “real” DOM does it solve? And what makes the way that React.js manipulates the DOM better than the “standard” way? Let's get you some answers: But First: What Is the DOM Anyway? "Document Object Model." It's only but natural that, before we get into details on React and the Virtual DOM, we gain a deep understanding of the DOM itself. Therefore, here's a definition that hopefully sheds enough light on this concept: DOM is a tree-structured abstraction of (or an in-memory representation, if you prefer) a page's HTML code. One that preserves the parent/child relationships between the nodes within its tree-like structure. Any better? The major benefit is the API that it provides, that allows us, developers, to easily scan through the HTML elements of a page and to manipulate them as needed. For instance: to add new nodes to edit a given node's content to remove specific nodes And What Is DOM Manipulation More Precisely? It's the very process that enables the content on any of your website's pages to be dynamically updated. Needless to add that it's JavaScript that you would use when handling the DOM. Also, methods such as: removeChild getElementByID … are included in the API that the “actual” DOM provides you with. What Efficiency Challenges Does the "Real" DOM Face? Now, before we go back to your initial “dilemma” (“how React Virtual DOM works”), let's see why a “virtual” DOM was even needed in the first place. What efficiency issues of the “real” DOM does it address? So, it's JavaScript that we use as we manipulate the DOM, right? And it used to work fantastic back in the days when static UIs would “rule” and the concept of dynamically updating nodes wasn't yet... “invented”. Well, since then things have changed... The DOM manipulation, once the core process of all modern interactive web pages, started to show its limitations. And that because the “real” DOM would update a “target” node along with the entire web page (with its corresponding layout and CSS). For instance, imagine that: You have a list of items and it's just one of those items that you need to update. Traditionally, the “real” DOM would re-render the entire list and not exclusively the items that receive updates. See? Just think of a scenario where you have an SPA (Single Page App). One with thousands of dynamically generated nodes, that would all need to “listen to” lots of future updates and to re-render them in the UI. It's here that things get discouragingly... slow! The real DOM can't cope with pages carrying thousands and thousands of components to be re-rendered when updates are being passed through. It's in this context here that the virtual DOM stepped in! And it's React that makes the most of it. Clear enough? How React Virtual DOM Works: Snapshots, Diffing and Reconciliation Before we get into the “how”, let's shed some light on the “what”. What is the “virtual” DOM? A light-weight abstraction/copy of the HTML DOM, having the same properties as the “real” one. The only difference is that it can't write to the screen like the actual DOM “can”. Also, it's local to React. A copy of the actual DOM that you get to update “intensively” without impacting the real DOM. Note: do keep in mind that it isn't React that introduced this concept since there are plenty of other libraries who're using it. Snapshots, Diffing and Reconciliation Now, let's get into details on how React virtual DOM works. a. First of all, React takes a virtual DOM snapshot before doing any updates. b. It will then use it (this record of the DOM state) to compare it against the updated virtual DOM, before applying any changes to the actual DOM itself. And it's a “diffing algorithm” that supports all this comparing and enables React to identify any changes. To detect the updates that have been applied. Also, the entire process is called “reconciliation”: Whenever updates need to be made to the actual DOM, React updates the Virtual DOM first, and then, once it has done its compairing, it syncs the Real DOM. In other words: before applying any of the requested updates, React makes a copy of the virtual DOM, that it will then set against the updated virtual DOM (diffing). It's during this diffing-reconciliation process that React detects the changes that have been applied and identifies the objects to be updated. And it's precisely those objects that it will update in the actual DOM. The huge benefits? virtual DOM updates a whole lot faster it updates exclusively the “target” nodes, leaving the rest ones of the page alone Summing Up To recap, let's try and sum up this whole “How React Virtual DOM Works” guide here to its bare essentials. So, here's how React updates the DOM in 3 simple steps: first, it applies the given updates to the whole Virtual DOM then, it compares it with the snapshot of the virtual DOM that it will have taken, using an algorithm called “diffing” during this whole process of comparing and spotting any changes/contrasts then, it's specifically (and exclusively) those changed elements that it updates in the actual DOM The END! Have I managed to make this process any clearer for you? Can you now see what's “under the hood” of the way React updates DOM? And the specific reasons why it's so much faster than the real DOM manipulation? ... Read more

RADU SIMILEANU / Apr 26'2018

Writing HTML Code for Screen Readers: 6 Best Practices

1. Provide Alternate Text for Every Image on Your Website

2. Writing HTML Code for Screen Readers: Use ARIA Attributes

3. Declare A Page's Language in HTML

4. Keep Your Links Short, but Not Too Short

5. Use Semantic Tags: Make Your Content Readable and Understandable

6. Structure Your Pages so They... Make Sense to Screen Reader Users

Recommended Stories

How to Create an Angular Project with Angular CLI in 5 Simple Steps

How to Use Bootstrap with Angular 4? Here Are 3 Ways to Add It To Your Project

How React Virtual DOM Works: Why Is It (So Much) Faster than the “Real” DOM?

Toronto

Montreal

Vancouver

New York

Partners

Writing HTML Code for Screen Readers: 6 Best Practices

1. Provide Alternate Text for Every Image on Your Website

2. Writing HTML Code for Screen Readers: Use ARIA Attributes

3. Declare A Page's Language in HTML

4. Keep Your Links Short, but Not Too Short

5. Use Semantic Tags: Make Your Content Readable and Understandable

6. Structure Your Pages so They... Make Sense to Screen Reader Users

Recommended Stories

How to Create an Angular Project with Angular CLI in 5 Simple Steps

How to Use Bootstrap with Angular 4? Here Are 3 Ways to Add It To Your Project

How React Virtual DOM Works: Why Is It (So Much) Faster than the “Real” DOM?

Browse cities

Toronto

Montreal

Vancouver

New York

Newsletter

Partners