How to Implement Read More in Html
HTML: A good basis for accessibility
A dandy deal of web content can exist made accessible just by making sure the correct Hypertext Markup Language elements are used for the right purpose at all times. This commodity looks in detail at how HTML can exist used to ensure maximum accessibility.
| Prerequisites: | Basic computer literacy, a basic understanding of HTML (run across Introduction to HTML), and an agreement of what accessibility is. |
|---|---|
| Objective: | To proceeds familiarity with the features of HTML that have accessibility benefits and how to use them appropriately in your web documents. |
HTML and accessibility
As yous acquire more than about HTML — read more than resources, expect at more than examples, etc. — you lot'll keep seeing a common theme: the importance of using semantic HTML (sometimes called POSH, or Plain Old Semantic HTML). This means using the correct HTML elements for their intended purpose as much as possible.
You might wonder why this is so important. Later all, you can utilise a combination of CSS and JavaScript to make just nigh whatsoever HTML chemical element comport in any way y'all desire. For example, a control button to play a video on your site could exist marked upward similar this:
But every bit you'll see in greater detail afterward on, it makes sense to apply the correct element for the job:
<button > Play video </push button > Not simply do HTML <button>s have some suitable styling applied past default (which you volition probably want to override), they besides have born keyboard accessibility — users can navigate between buttons using the Tab cardinal and actuate their pick using Render or Enter.
Semantic HTML doesn't take any longer to write than non-semantic (bad) markup if y'all do it consistently from the start of your project. Fifty-fifty better, semantic markup has other benefits beyond accessibility:
- Easier to develop with — equally mentioned above, you become some functionality for complimentary, plus it is arguably easier to empathise.
- Improve on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to brand responsive.
- Good for SEO — search engines give more than importance to keywords inside headings, links, etc. than keywords included in not-semantic
<div>s, etc., so your documents will be more than findable by customers.
Let'southward get on and look at accessible HTML in more detail.
Note: It is a good idea to have a screen reader set up on your local computer so that you lot can do some testing of the examples shown beneath. See our Screen readers guide for more details.
Good semantics
We've already talked about the importance of proper semantics, and why we should use the right HTML chemical element for the job. This cannot be ignored, every bit information technology is ane of the main places that accessibility is desperately cleaved if non handled properly.
Out there on the web, the truth is that people do some very strange things with HTML markup. Some abuses of HTML are due to legacy practices that take not been completely forgotten, and some are just plain ignorance. Any the instance, you should supervene upon such bad lawmaking.
Sometimes you are not in the position to get rid of lousy markup — your pages might be generated by some kind of server-side framework over which y'all don't have total control, or you might accept third party content on your folio (such as ad banners) over which you have no control.
The goal isn't "all or nothing"; every improvement you lot can brand volition help the cause of accessibility.
Text content
One of the best accessibility aids a screen reader user can have is an excellent content structure with headings, paragraphs, lists, etc. An excellent semantic case might look something similar the following:
<h1 > My heading </h1 > <p > This is the start section of my certificate. </p > <p > I'll add another paragraph here too. </p > <ol > <li > Hither is </li > <li > a list for </li > <li > you to read </li > </ol > <h2 > My subheading </h2 > <p > This is the first subsection of my document. I'd beloved people to exist able to find this content! </p > <h2 > My 2nd subheading </h2 > <p > This is the second subsection of my content. I think is more than interesting than the final ane. </p > Nosotros've prepared a version with longer text for you to try out with a screen reader (see adept-semantics.html). If you attempt navigating through this, you'll meet that this is pretty piece of cake to navigate:
- The screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc.
- Information technology stops after each element, letting you get at any pace is comfy for you.
- You lot can bound to the next/previous heading in many screen readers.
- You tin also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to discover specific content.
People sometimes write headings, paragraphs, etc. using presentational HTML and line breaks, something like the following:
<font size = "7" > My heading </font > <br > <br > This is the get-go section of my document. <br > <br > I'll add together another paragraph here also. <br > <br > ane. Here is <br > <br > 2. a list for <br > <br > 3. you to read <br > <br > <font size = "5" > My subheading </font > <br > <br > This is the showtime subsection of my document. I'd love people to be able to find this content! <br > <br > <font size = "5" > My second subheading </font > <br > <br > This is the second subsection of my content. I call back is more interesting than the concluding i. If you effort our longer version out with a screen reader (come across bad-semantics.html), you'll not take a very good experience — the screen reader hasn't got annihilation to apply equally signposts, so you can't retrieve a useful table of contents, and the whole page is seen every bit a unmarried giant block, and then it is only read out in one get, all at once.
In that location are other issues too beyond accessibility — it is harder to manner the content using CSS, or dispense it with JavaScript, for example, because there are no elements to use as selectors.
Using clear language
The language you utilize can as well affect accessibility. In general, y'all should use clear language that is non overly circuitous and doesn't apply unnecessary jargon or slang terms. This not merely benefits people with cognitive or other disabilities; information technology benefits readers for whom the text is not written in their commencement language, younger people ... everyone, in fact! Apart from this, you should try to avoid using language and characters that don't get read out clearly past the screen reader. For example:
- Don't use dashes if you can avert it. Instead of writing 5–7, write 5 to 7.
- Aggrandize abbreviations — instead of writing Jan, write January.
- Expand acronyms, at to the lowest degree once or twice. Instead of writing HTML in the commencement case, write Hypertext Markup Language.
Page layouts
In the bad quondam days, people used to create page layouts using HTML tables — using different table cells to comprise the header, footer, sidebar, master content column, etc. This is not a good idea because a screen reader volition probable give out disruptive readouts, especially if the layout is complex and has many nested tables.
Try our example table-layout.html case, which looks something like this:
<table width = "1200" > <!-- main heading row --> <tr id = "heading" > <td colspan = "vi" > <h1 align = "heart" > Header </h1 > </td > </tr > <!-- nav menu row --> <tr id = "nav" bgcolor = "#ffffff" > <td width = "200" > <a href = "#" align = "center" > Habitation </a > </td > <td width = "200" > <a href = "#" align = "center" > Our team </a > </td > <td width = "200" > <a href = "#" align = "center" > Projects </a > </td > <td width = "200" > <a href = "#" align = "middle" > Contact </a > </td > <td width = "300" > <form width = "300" > <input type = "search" proper noun = "q" placeholder = "Search query" width = "300" > </form > </td > <td width = "100" > <button width = "100" > Become! </button > </td > </tr > <!-- spacer row --> <tr id = "spacer" height = "10" > <td > </td > </tr > <!-- main content and bated row --> <tr id = "principal" > <td id = "content" colspan = "4" bgcolor = "#ffffff" > <!-- main content goes hither --> </td > <td id = "bated" colspan = "ii" bgcolor = "#ff80ff" valign = "elevation" > <h2 > Related </h2 > <!-- aside content goes hither --> </td > </tr > <!-- spacer row --> <tr id = "spacer" height = "10" > <td > </td > </tr > <!-- footer row --> <tr id = "footer" bgcolor = "#ffffff" > <td colspan = "six" > <p > ©Copyright 2050 by nobody. All rights reversed. </p > </td > </tr > </table > If y'all effort to navigate this using a screen reader, it will probably tell you that there'south a table to exist looked at (although some screen readers can approximate the divergence between tabular array layouts and data tables). You'll then likely (depending on which screen reader y'all're using) take to go downwards into the tabular array as an object and expect at its features separately, then get out of the tabular array again to behave on navigating the content.
Table layouts are a relic of the by — they made sense dorsum when CSS support was not widespread in browsers, but at present they merely create confusion for screen reader users. Additionally, their source code requires more markup, which makes them less flexible and more than hard to maintain. Y'all can verify these claims by comparing your previous experience with a more modern website structure case, which could look something like this:
<header > <h1 > Header </h1 > </header > <nav > <!-- main navigation in here --> </nav > <!-- Here is our page's principal content --> <main > <!-- It contains an article --> <article > <h2 > Article heading </h2 > <!-- article content in here --> </commodity > <aside > <h2 > Related </h2 > <!-- aside content in here --> </aside > </master > <!-- And here is our main footer that is used across all the pages of our website --> <footer > <!-- footer content in here --> </footer > If you effort our more than mod structure example with a screen reader, yous'll run across that the layout markup no longer gets in the way and confuses the content readout. It is also much leaner and smaller in terms of code size, which means easier to maintain code, and less bandwidth for the user to download (especially prevalent for those on slow connections).
Some other consideration when creating layouts is using HTML5 semantic elements every bit seen in the above example (see content sectioning) — you can create a layout using merely nested <div> elements, simply it is better to use appropriate sectioning elements to wrap your chief navigation (<nav>), footer (<footer>), repeating content units (<commodity>), etc. These provide actress semantics for screen readers (and other tools) to give users extra clues about the content they are navigating (see Screen Reader Support for new HTML5 Department Elements for an thought of what screen reader support is like).
Note: In improver to having skillful semantics and an attractive layout, your content should brand logical sense in its source social club — you can always identify it where you desire using CSS later on, but you should go the source order right to showtime with, so what screen reader users get read out to them will make sense.
UI controls
By UI controls, we mean the master parts of spider web documents that users interact with — most ordinarily buttons, links, and form controls. In this section, nosotros'll expect at the basic accessibility concerns to exist aware of when creating such controls. Later on articles on WAI-ARIA and multimedia volition expect at other aspects of UI accessibility.
One fundamental aspect of the accessibility of UI controls is that by default, browsers let them to be manipulated past the keyboard. You tin try this out using our native-keyboard-accessibility.html example (see the source code). Open this in a new tab, and try pressing the tab key; after a few presses, you should run into the tab focus start to move through the different focusable elements. The focused elements are given a highlighted default way in every browser (information technology differs slightly betwixt different browsers) so that you lot can tell what element is focused.
You can and so press Enter/Return to follow a focused link or press a button (nosotros've included some JavaScript to make the buttons alert a message), or beginning typing to enter text in a text input. Other form elements take different controls; for example, the <select> element can have its options displayed and cycled betwixt using the up and down arrow keys.
You lot essentially become this beliefs for complimentary, just past using the appropriate elements, due east.grand.
<h1 > Links </h1 > <p > This is a link to <a href = "https://world wide web.mozilla.org" > Mozilla </a > . </p > <p > Another link, to the <a href = "https://programmer.mozilla.org" > Mozilla Programmer Network </a > . </p > <h2 > Buttons </h2 > <p > <button data-message = "This is from the first push" > Click me! </button > <button information-bulletin = "This is from the second button" > Click me too! </button > <button data-message = "This is from the third button" > And me! </push button > </p > <h2 > Form </h2 > <class > <div > <label for = "proper noun" > Fill up in your proper name: </label > <input type = "text" id = "proper name" name = "name" > </div > <div > <label for = "age" > Enter your historic period: </label > <input blazon = "text" id = "age" name = "historic period" > </div > <div > <label for = "mood" > Choose your mood: </label > <select id = "mood" name = "mood" > <option > Happy </option > <option > Sad </option > <option > Angry </pick > <pick > Worried </pick > </select > </div > </course > This means using links, buttons, form elements, and labels accordingly (including the <characterization> element for form controls).
Nonetheless, it is again the case that people sometimes practise strange things with HTML. For example, you sometimes see buttons marked upwards using <div>south, for example:
<div data-bulletin = "This is from the first button" > Click me! </div > <div data-message = "This is from the second push" > Click me likewise! </div > <div data-message = "This is from the 3rd push button" > And me! </div > Simply using such lawmaking is not advised — you lot immediately lose the native keyboard accessibility you lot would have had if you'd just used <button> elements, plus yous don't go any of the default CSS styling that buttons go.
Edifice keyboard accessibility back in
Adding such advantages back in takes a bit of piece of work (y'all tin can see an example in our fake-div-buttons.html example — also see the source code). Hither we've given our imitation <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0":
<div data-bulletin = "This is from the first button" tabindex = "0" > Click me! </div > <div data-bulletin = "This is from the 2d button" tabindex = "0" > Click me also! </div > <div data-message = "This is from the third button" tabindex = "0" > And me! </div > Basically, the tabindex attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source society. This is nearly always a bad thought, equally it can cause major confusion. Utilize information technology merely if yous really demand to, for example, if the layout shows things in a very different visual order to the source lawmaking, and you desire to make things work more logically. At that place are two other options for tabindex:
-
tabindex="0"— every bit indicated above, this value allows elements that are not normally tabbable to get tabbable. This is the most useful value oftabindex. -
tabindex="-ane"— this allows not usually tabbable elements to receive focus programmatically, e.g., via JavaScript, or equally the target of links.
While the higher up addition allows united states of america to tab to the buttons, information technology does non allow us to activate them via the Enter/Render key. To do that, we had to add the following bit of JavaScript trickery:
document. onkeydown = office ( e ) { if (e.key === "Enter" ) { // The Enter/Render key document.activeElement. click ( ) ; } } ; Hither we add a listener to the document object to notice when a push has been pressed on the keyboard. We check what button was pressed via the event object's key property; if the cardinal pressed is Enter/Return, nosotros run the function stored in the push'south onclick handler using document.activeElement.click(). activeElement which gives us the element that is currently focused on the page.
This is a lot of extra hassle to build the functionality back in. And there'southward bound to be other problems with it. Ameliorate to but use the right element for the right job in the first place.
Meaningful text labels
UI control text labels are very useful to all users, only getting them right is particularly of import to users with disabilities.
Yous should make certain that your push button and link text labels are understandable and distinctive. Don't only utilise "Click here" for your labels, as screen reader users sometimes get up a list of buttons and class controls. The following screenshot shows our controls being listed by VoiceOver on Mac.
Make sure your labels brand sense out of context, read on their own, too every bit in the context of the paragraph they are in. For example, the following shows an case of good link text:
<p > Whales are really awesome creatures. <a href = "whales.html" > Find out more than near whales </a > . </p > merely this is bad link text:
<p > Whales are actually awesome creatures. To find more out about whales, <a href = "whales.html" > click here </a > . </p > Notation: You tin find a lot more about link implementation and best practices in our Creating hyperlinks article. You can too see some skillful and bad examples at skillful-links.html and bad-links.html.
Form labels are too important for giving you a clue about what you need to enter into each grade input. The following seems like a reasonable enough case:
Fill in your name: <input blazon = "text" id = "name" proper noun = "name" > However, this is not so useful for disabled users. At that place is nothing in the to a higher place example to associate the label unambiguously with the form input and make it clear how to fill information technology in if you cannot come across information technology. If you access this with some screen readers, yous may merely be given a description along the lines of "edit text."
The following is a much ameliorate example:
<div > <label for = "proper name" > Fill in your name: </characterization > <input blazon = "text" id = "proper noun" proper name = "proper name" > </div > With code like this, the label will exist conspicuously associated with the input; the description volition be more like "Fill in your name: edit text."
As an added bonus, in most browsers associating a label with a form input ways that yous can click the characterization to select or activate the class element. This gives the input a bigger hitting area, making it easier to select.
You can find a nice caption of the importance of proper text labels, and how to investigate text label issues using the Firefox Accessibility Inspector, in the following video:
Accessible information tables
A basic data tabular array tin be written with very simple markup, for example:
<table > <tr > <td > Name </td > <td > Age </td > <td > Gender </td > </tr > <tr > <td > Gabriel </td > <td > 13 </td > <td > Male </td > </tr > <tr > <td > Elva </td > <td > 8 </td > <td > Female </td > </tr > <tr > <td > Freida </td > <td > 5 </td > <td > Female </td > </tr > </table > Simply this has problems — there is no way for a screen reader user to associate rows or columns together as groupings of information. To do this, you need to know what the header rows are and if they are heading up rows, columns, etc. This tin only be washed visually for the above table (come across bad-table.html and try the example out yourself).
Now take a await at our punk bands table example — y'all can see a few accessibility aids at work hither:
- Table headers are defined using
<th>elements — y'all tin as well specify if they are headers for rows or columns using thescopeattribute. This gives you complete groups of information that can be consumed by screen readers as single units. - The
<caption>element and<tabular array>summaryaspect both do similar jobs — they deed as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. The<caption>element is generally preferred as it makes it's content accessible to sighted users besides, who might also find it useful. You don't actually need both.
Text alternatives
Whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image and video content cannot exist seen by visually-impaired people, and sound content cannot be heard by hearing-impaired people. We comprehend video and sound content in detail in the Accessible multimedia, but for this commodity we'll look at accessibility for the apprehensive <img> element.
Nosotros accept a simple example written upwardly, accessible-epitome.html, which features iv copies of the same image:
<img src = "dinosaur.png" > <img src = "dinosaur.png" alt = "A red Tyrannosaurus King: A two legged dinosaur continuing upright like a human, with small artillery, and a large head with lots of precipitous teeth." > <img src = "dinosaur.png" alt = "A carmine Tyrannosaurus Male monarch: A ii legged dinosaur standing upright like a human being, with small arms, and a big head with lots of sharp teeth." title = "The Mozilla crimson dinosaur" > <img src = "dinosaur.png" aria-labelledby = "dino-label" > <p id = "dino-label" > The Mozilla red Tyrannosaurus Rex: A 2 legged dinosaur standing upright similar a human being, with small arms, and a large head with lots of sharp teeth. </p > The starting time epitome, when viewed by a screen reader, doesn't really offer the user much assist — VoiceOver for example reads out "/dinosaur.png, prototype". It reads out the filename to effort to provide some help. In this example the user will at least know information technology is a dinosaur of some kind, just often files may be uploaded with car-generated file names (e.g. from a digital camera) and these file names would likely provide no context to the epitome's content.
Note: This is why you should never include text content within an image — screen readers can't access it. There are other disadvantages likewise — yous can't select it and copy/paste it. Just don't practice it!
When a screen reader encounters the second image, it reads out the total alt attribute — "A cerise Tyrannosaurus Male monarch: A two legged dinosaur standing upright similar a human, with pocket-size artillery, and a big head with lots of precipitous teeth.".
This highlights the importance of not merely using meaningful file names in case and so-called alt text is non available, but as well making sure that alt text is provided in alt attributes wherever possible. Note that the contents of the alt attribute should ever provide a straight representation of the prototype and what it conveys visually. Any personal noesis or actress clarification shouldn't be included here, equally information technology is non useful for people who have not come up across the image before.
1 matter to consider is whether your images have significant within your content, or whether they are purely for visual ornamentation, and thus accept no meaning. If they are decorative, it is ameliorate to write an empty text as a value for alt aspect (run across Empty alt attributes) or to just include them in the page as CSS background images.
If you do desire to provide extra contextual data, you should put it in the text surrounding the image, or inside a title attribute, equally shown above. In this example, nigh screen readers volition read out the alt text, the championship aspect, and the filename. In addition, browsers display championship text as tooltips when moused over.
Permit'south have some other quick look at the fourth method:
<img src = "dinosaur.png" aria-labelledby = "dino-characterization" > <p id = "dino-characterization" > The Mozilla red Tyrannosaurus ... </p > In this instance, nosotros are non using the alt attribute at all — instead, we have presented our description of the image equally a regular text paragraph, given it an id, and and so used the aria-labelledby attribute to refer to that id, which causes screen readers to use that paragraph as the alt text/label for that image. This is especially useful if you desire to apply the aforementioned text as a label for multiple images — something that isn't possible with alt.
Notation: aria-labelledby is office of the WAI-ARIA spec, which allows developers to add together in actress semantics to their markup to improve screen reader accessibility where needed. To detect out more about how it works, read our WAI-ARIA Basics article.
Other text alternative mechanisms
Images also accept another mechanisms available for providing descriptive text. For example, there is a longdesc attribute that is meant to point to a separate spider web document containing an extended clarification of the image, for example:
<img src = "dinosaur.png" longdesc = "dino-info.html" > This sounds like a adept idea, especially for infographics similar big charts with lots of information on them that could perhaps be represented as an accessible information tabular array instead (encounter Accessible data tables). However, longdesc is not supported consistently by screen readers, and the content is completely inaccessible to not-screen reader users. Information technology is arguably much amend to include the long description on the aforementioned page as the image, or link to it with a regular link.
HTML5 includes two new elements — <figure> and <figcaption> — which are supposed to acquaintance a figure of some kind (it could be anything, not necessarily an prototype) with a effigy explanation:
<figure > <img src = "dinosaur.png" alt = "The Mozilla Tyrannosaurus" > <figcaption > A red Tyrannosaurus Rex: A two legged dinosaur standing upright similar a human, with small-scale arms, and a big head with lots of sharp teeth. </figcaption > </figure > Unfortunately, near screen readers don't seem to associate figure captions with their figures yet. That said, the chemical element structure is useful for CSS styling, plus information technology provides a manner to place a description of the image next to it in the source.
Empty alt attributes
<h3 > <img src = "commodity-icon.png" alt = " " > Tyrannosaurus Male monarch: the king of the dinosaurs </h3 > There may exist times where an paradigm is included in a page's design, but its principal purpose is for visual ornament. You'll find in the lawmaking example above that the image'southward alt attribute is empty — this is to make screen readers recognize the paradigm, just not attempt to describe the image (instead they'd only say "epitome", or similar).
The reason to utilize an empty alt instead of non including it is because many screen readers announce the whole image URL if no alt is provided. In the above example, the image is acting as a visual decoration to the heading it's associated with. In cases like this, and in cases where an image is only decoration and has no content value, you should include an empty alt in your img elements. Some other alternative is to use the aria role attribute role="presentation" equally this also stops screen readers from reading out alternative text.
Note: If possible yous should use CSS to display images that are just decorative.
More on links
Links ( the <a> chemical element with an href attribute ), depending on how they are used, can help or harm accessibility. Past default, links are accessible in appearance. They can amend accessibility past helping a user quickly navigate to unlike sections of a certificate. They can also harm accessibility if their attainable styling is removed or if JavaScript causes them to behave in unexpected ways.
Link styling
By default, links are visually dissimilar from other text in both color and text-ornament, with links existence blue and underlined by default, purple and underlined if visited, and with a focus-ring when they receive keyboard focus.
Colour should not be used as the sole method of distinguishing links from non-linking content. Link text color, similar all text, has to be significantly dissimilar from the background color (a four.5:1 dissimilarity). In improver, links should visually exist significantly different from non-linking text, with a minimum contrast requirement of three:1 between link text and surrounding text and between default, visited, and focus/active states and a iv:5 contrast between all those country colors and the groundwork colour.
onclick events
Anchor tags are often abused with the onclick result to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing.
These values crusade unexpected beliefs when copying or dragging links, opening links in a new tab or window, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a <button> instead. In general you should only utilise an anchor for navigation using a proper URL.
External links and linking to non-HTML resource
Skip links
Proximity
Big amounts of interactive content—including anchors—placed in close visual proximity to each other should have space inserted to dissever them. This spacing is benign for people who suffer from fine motor control problems and may accidentally actuate the wrong interactive content while navigating.
Spacing may exist created using CSS properties such as margin.
- Hand tremors and the giant-button-problem - Axess Lab
Examination your skills!
You've reached the finish of this article, only tin can yous retrieve the most important data? See Test your skills: HTML Accessibility to verify that you've retained this information earlier you movement on.
Summary
You lot should now exist well-versed in writing attainable HTML for most occasions. Our WAI-ARIA basics article will help to fill up gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad utilise.
In this module
- What is accessibility?
- HTML: A good basis for accessibility
- CSS and JavaScript accessibility best practices
- WAI-ARIA nuts
- Accessible multimedia
- Mobile accessibility
- Accessibility troubleshooting
Source: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
0 Response to "How to Implement Read More in Html"
Post a Comment