How to improve the accessibility of your WordPress site

If you want to help the progress of WordPress it is important to be up to date. And today everyone who has a website must think about its accessibility .

When you have to design a website you have to take into account the necessary techniques and skills and try everything. The techniques required for a web are many, as well as the skills.

But the tests are what makes the difference . A website that does not analyze its usability is nothing. And when we talk about usability we must also be talking about accessibility, because we are not going to leave without being able to access your website in reasonable conditions to 17% of the population right?

So if you have a website you have to think about your accessibility .

But what is making an accessible website?

 Photo by MariCarmen de Alba in her speech in WordCamp Chiclana on accessibility

Mª Carmen de Alba in WordCamp Chiclana

Basically we could say that it is to make your website visible and easily navigable for users, but for all .

And I say this because the capacity or incapacity of a person does not should determine the accessibility to your website .

Imagine, for example, a blind person browsing your website and easily accessing your content.

Accessibility is giving all users equal opportunities for surfing your website regardless of their capabilities or technological limitations.

Having said that, we will look at some aspects to take into account to improve the accessibility of your website.

How to improve accessibility

 accessibility "width =" 624 "height =" 466 "srcset =" 624w, uploads / 2017/10 / accessibility-550x411.jpg 550w, 510w "sizes =" (max-width: 624px) 100vw, 624px "/> </p>
<li><strong> Structure and consistent design </strong> – There are lots of themes that you can use on your website but it is important that your design has a stable, consistent structure to improve accessibility to your website. If you have sidebar, navigation menus, they should be consistent on every page of your web .. </li>
<li><strong> Text <em> alt </em> in all images </strong> – The text <em> alt </em> is simply an alternative to an image, as a small description that explains what is seen in the image. For example, if you put a picture of a black dog, your text <em> alt </em> should say something like "my black dog". In this way users who use screen readers for vision problems may have a complete understanding of all the elements of your page when reading this text <em> alt </em>. </li>
<li><strong> Use well readable fonts </strong> – No use fonts that are difficult to read, too thin, with designs that make reading difficult, or sizes that are too small. </li>
<li><strong> Use headings correctly on all pages </strong> – Headings, <em> H </em>give your web a semantic structure. Every website usually has a main title, which defines it, but the most important thing for accessible reading is that the headers are used correctly, and the rules to follow are simple: </li>
<li><strong> Make the linked content meaningful </strong> – Imagine a page with links like "click here", "keep reading" or something similar on a help page, what is not very understandable? You will make your website less accessible. Get used to the fact that when you link to another page, the linked texts are understandable, that they have a meaning in themselves. </li>
<li><strong> Improves and expands the three-level approach </strong>. Web design sometimes speaks of the three-level approach, which separates the content, style and behavior of the page. This is a good practice that improves the accessibility of the web. </li>
<li><strong> Test your website by all possible methods </strong> – To know if your website is really accessible you must visit it by all possible methods and technologies, but above all to be visited by people with different abilities and disabilities. For example, navigate only from the keyboard, without a mouse. Check CSS, contrast levels, try it in different browsers. Check the color schemes and how different people see them. Test, test, test. </li>
<h2><span id= To finish

When we talk about accessibility in WordPress we are talking mainly about the topics. So, to begin, find a topic that makes it better than the rest, so you will have to make fewer modifications on your own.

There are many more aspects to consider, many, for what I invite you to take a look to the presentation that in WordCamp Chiclana imparted my friend Mª Carmen de Alba absolutely indispensable to understand these and other factors

How to automate the creation of titles for images • WordPress Help

As you already know, WordPress creates the titles of your images, the label title automatically starting from file name but neither is the perfect choice always nor does it complete other important fields like the description, the alternative title or even the legend.

This has a solution in part, and we will help with the plugin Format Media Titles . Once installed we will go to the settings page of the same, where we can automate some aspects about the automatic format of the titles of the images when uploading them.

 adjustments format media titles WordPress

We can remove characters as scripts, underscores and more, or also convert all words to uppercase, lowercase or capitalize.

And finally, and almost more interesting, use the generated title also as an alternative title, description and even legend .

Of course, just miracles if the file title is of type DSC129FT122 it's as if you did nothing, You get shit, nicer, but shit after all.

Okay, you'll tell me it's not perfect, that those fields are different and we have to complete one by one, adapting them to their real objective. Okay, but is not this better than nothing?

Especially in an editorial environment where there are several authors and you do not control everything they do, or just do not have time will not better be better titles? that some non-existent titles?

In an ideal world we would always do the following:

  1. Put a file name with the keywords of its content, semantically, before uploading it.
  2. We would specify a title with the appropriate keywords and in a human-oriented semantic context.
  3. We would write a good description in which we will not only explain what is seen in the image but also including labels that identify it in terms of color, elements that compose it, if it is real photography or design, etc.
  4. We would write an alternative descriptive text of what is seen in the image, thinking about the much-abandoned world of accessibility . [19659] 017] If this is your case and you have completely controlled the editorial environment of your great website, but we do not live in an ideal world most of the time, and it is better to offer something that does not offer anything, at least in publications that you do not fully control.

    That's the idea.

    NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

    Loading …

    That may also help you:

the first WordPress theme 100% accessible • WordPress Help

If you have ever wanted to offer accessibility in WordPress you will have verified the almost total absence of themes and plugins available to offer a navigation experience to people with vision problems.

But that's over , or little remains. Kayosey is a project of WordPress theme 100% accessible and of course also adaptable ( responsive ). The idea is that it be a base theme, known as a starter theme starting from the skeleton of or nderscores that serves as a structure to develop any other theme, although it is also can be used independently.

Once developed the theme will be GPL 2 or higher and uploaded to the WordPress directory, free for all but for now the people of Pixelated Heart ] needs crowdfunding to be able to spend the necessary time, working hand in hand with the WordPress accessibility team, to carry out this very important development for the community.

Why the "title" of links in WordPress has disappeared • WordPress Help

One of the most striking, though hidden, novelties of WordPress 4.2 has been that of add links with just copy and paste over a text but it has gone unnoticed that now there is no attribute " title " in the links.

Instead you will now see the caption " Text of the link "which is the text that is linked, not the attribute of Title or title as it was known. For practical purposes you will see that it can no longer be added from the window adding links that attribute used historically for questions of accessibility and SEO?

 link text wordpress 4.2

Title in links and SEO

There are many people who believe that adding the attribute title to a link is good for the positioning of a link, but is that true? really?

The truth is that no. The most important practice for SEO links is that the linked text is descriptive for the link, for example:

Only in situations where you want to offer, for usability a useful description for the visitor is interesting to use the attribute title but ] just for that reason, for usability .

For example, imagine that you use the word concupiscence in a text and you want to link it to a dictionary page that explains it. In that case it would be relevant to add a title that explains that clicking on that link takes you to the definition of the word.

You would have this: concupiscence

The attribute title would offer a pop-up text by passing the cursor that will show the visitor what that link is for, and offers it a utility.

Another attribute that you could use, however, for that purpose, would be abbr which allows to display a pop-up text without the need to link the word to anything . For example:

That would look like this: concupiscence (put the cursor over the word to prove it)

But all this is for usability issues, not for SEO . In the positioning the really important thing is the one known as anchor text the text associated with the link, which must be descriptive by itself.

Title in the links and accessibility ]

The attribute title on the other hand, historically has been considered as an aid to visitors who use readers for the blind, but the reality is that not only does not help but on the contrary .

Lately WordPress is increasingly involved in accessibility and mobile usability and it is not by chance, but because as a modern CMS it must address the standards and offer the best possible experience.

And the fact is that the attribute title not only is not good for accessibility but quite the opposite, and to understand it I strongly recommend reading the article " I thought that the title in a link improved accessibility. I was wrong . "

As explained in the article, the author exposed himself to the experience of using screen readers as those used by blind people, and found that the title in the links not only did not help but they were absolutely useless for this type of users. The complete article and others that link from it are absolutely revealing if you want to learn about accessibility, I recommend it completely.

Ok, but I want it!

If in spite of the explanations you still want to add the attribute title to your links no problem, you can still do it in two ways.

Add attribute title manually

If you want to add the title you only have to go to the Text tab of the WordPress editor and add it manually

Return to the previous window to WordPress 4.2

If you have not g used the change and you want to return to the previous situation, and that the window to insert links has the field to add the attribute title then install the plugin Restore link title link that you returns to the old window.

 add link wordpress

Why this change?

Although some users have thought that it was a mistake, the change has been thought through and conscious, and motivated to make WordPress more accessible and, in line with the WordPress philosophy simpler, including only the basics and fundamentals according to the standards.

What do you think of this change?

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

What's New in WordPress 4.2 • WordPress Help

With just a few weeks left until the final and official release of WordPress 4.2 scheduled for the month of April, all the news are clear and list the beta 2 to go testing and warning of possible failures.

Not that WordPress 4.2 is going to be, a priori, a revulsive in the evolution of WordPress, but for sure that more than one of the novelties is going to release some "It's about time", and if not …

Complete redesign of the tool " Post this "

The veteran but fantastic creation system of drafts from a favorite, or bookmarlet if you prefer to say so, it has finally received a complete redesign that will not only be much more intuitive but will also work and be seen properly on mobile devices.

In addition to the usual button that you drag to your Favorites bar now we have an additional button to show the necessary JavaScript, for those who prefer to manually create the favorite from their browser manager.

And in the case of using mobile devices there is an additional button that, once pressed, opens you the window that you will have to add to the favorites of the mobile browser, the usual way. Of course, the new interface is totally adaptable ( responsive ) .

When visiting the page you want to write on your blog, you just have to press the button of your favorites and will open a reduced but fully functional version of the WordPress editor, in which, in addition to the original title, it will include the first paragraphs of the original article and a link to it. From there you can apply formats, tag or upload media, and to make things even easier it shows you under the title a quick browser of the images of the original article to insert them quickly in your publication, just one click.

When you finish you can save it as a draft or publish it immediately.

It was necessary already right?

Personally I think it's a wonderful tool, which I always recommend in the courses I teach, fantastic for anyone who usually writes from other references.

Change theme from the customizer

Until now in the WordPress customizer you could manage widgets, settings of the active or preview theme, define the navigation menus in the theme and define if you want to show posts or a static page, but now you can also browse the installed themes and activate the one you want, being able to preview it before its activation .

Plugins installation improvements

Now, instead of leaving a pop-up window when you want to install a plugin, steps are shortened, because when you press the button " Install now "the process starts, and above you do not change the window, so you can continue installing plugins without waiting, or changing the window back and forth, a total joy, which was also going ra to yes?

But the thing is not there, but are activated immediately upon installation, without requiring additional action . There will be (the majority) whom the additional step of activating seemed silly, but surely also has its small controversy for those who like to install plugins and activate them in separate processes.

From my point of view it was a stupid step , so if you install a plugin, what is it for? To store them or to test them? Well that, you know my (favorable) opinion.

Improvements in the support of emojis

Ok, this is a pijada, an absurdity, but also the developers have their foolish moments, let's say the bloggers who use caritas in their publications (NO, DO NOT DO IT!), and if you are one of these two specimens you will love how easy it is now to insert these "japan" bugs into your posts.

The idea is that if you use these things install this plugin and WordPress will show them correctly in almost all browsers a globalized horror!

And to spoil it even more, you can also add them to slug ¡¿¿¿¿WTF ??? !!!

Did I say do not do it? Yourself

More news under the hood

In addition to the previous, more visible, WordPress 4.2, there are others that surely, although not so showy, sure are the ones that make a difference . We see them:

  • New functionality wp.a11y.speak () that will help JavaScript to communicate better with screen readers and thus better inform users with vision problems to know better what is happening on the screen. This is a breakthrough for the accessibility in WordPress .
  • Some minor adjustments in the color scheme of WordPress administration.
  • The terms shared in different taxonomies are now separated when you update some from them. This solves the problem with the shared terms that show updates in different taxonomies.
  • Added the possibility of adding FTP and SSH credentials when updating the plugins.
  • Improvements in WP_Comment_Query

In short, a more version, in this case not very surprising but with some news that are improving little by little (except for the emojis ) our beloved WordPress.

If you dare you can go holding the air ] on this test site .

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

Word accessibility in WordPress

 key image with disabled logo

The advantages of web accessibility can be summarized in the following quote from Steven Pemberton, president of W3C forms and HTML working groups:

Your most important user is blind. Half of the visits to your site come from Google, and Google only sees what a blind person can see. If your site is not accessible, you will have fewer visits. End of the story

Google sees your site practically as a blind visitor would so there you have a good element of reflection, right? But there is more, much more …

:: Advantages of web accessibility ::

In case you are not worth these arguments there are more advantages of offering a site according to web accessibility standards :

  1. Increase the number of potential visitors to the website : this is a very important reason for a company that wants to attract new customers. When a web page is accessible it does not present barriers that hinder its access, regardless of the user's conditions. A web page that meets the standards is more likely to be displayed correctly on any device with any browser. According to data from the INE (1999), 9% of the population in Spain has some disability, in total 3,528,221 people.
  2. Reduces the costs of development and maintenance : although initially learn to make a accessible web page implies a cost (just as it costs to learn to use any new technology), once you have the knowledge, the cost of developing and maintaining an accessible web page is less than that of an inaccessible web page accessible web is a well-made page, less prone to contain errors and easier to update.
  3. Reduces the loading time of the web pages and the load of the web server : by separating the content of the information about the presentation of a web page through CSS reduces the size of web pages and, therefore, reduces the loading time of web pages.
  4. Demonstrates social responsibility . You fulfill a citizen's right to participation and non-discrimination because of disability.
  5. You comply with the legislative provisions in this regard, both by the Public Administration, which is obliged to do so before the public, and by private networks that aspire to participate in contracts with the Administration or public financing.
  6. When designing according to accessibility standards, we guarantee the equivalence of contents between different browsers and devices ;
  7. Better indexing in the engines of search . The fulfillment of the guidelines, both in code and in semantic contents (for example, links with sense) allows the search engines to better identify the contents, and consequently, greater possibilities of positioning in the search engines.
  8. Improvement the usability of the web . Although they are not equivalent, accessibility has a close relationship with the usability of a site. By meeting basic accessibility requirements in the technical elements of a website (content structure, links, color contrast, effects and movements, forms, tables, etc.), the conditions of use for most people improve. [19659022] :: Spanish legislation on web accessibility ::

    And, if that were not enough motive, there is sufficient reason to take it into account based on the Spanish legislation that regulates the rights to accessibility on the web :

    • Law 34/2002 of July 11, on services of the information society and electronic commerce.
    • Law 51/2003 of December 2 on Equality of Opportunities, Non-Discrimination and Universal Accessibility with disability (LIONDAU).
    • Royal Decree 366/2007 of March 16, on accessibility and non-discrimination of persons with disabilities in their relations with the General State Administration.
    • Law 27/2007, of October 23 re, by which the Spanish sign languages ​​are recognized and the means of support for oral communication of deaf people, hearing impaired and deafblind are regulated.
    • Royal Decree 1494/2007, of November 12, by the that the Regulation on the basic conditions for the access of persons with disabilities to the information society is approved.
    • Law 49/2007, of December 26, establishing the regime of infractions and sanctions in matter of equal opportunities, non-discrimination and universal accessibility for people with disabilities

    :: Problems related to web accessibility ::

    The main limitations that must be taken into account when making our website accessible would be the following:

    • Visuals : In its different degrees, from low vision to total blindness, in addition to problems to distinguish colors (Daltonism).
    • Motrice s : Difficulty or inability to use the hands, including tremors, muscle slowness, etc., due to diseases such as Parkinson's, muscular dystrophy, cerebral palsy, amputations, among others.
    • Auditory : Deafness or auditory deficiencies
    • Cognitive : Learning difficulties (dyslexia, dyscalculia, etc.) or cognitive disabilities that affect memory, attention, pas logical skills, etc.
    • Old age : People with disabilities can add the group of people of the "third age", since the deficiencies and problems of the physical media, as well as many times the content, mean that these people are also at risk of infoexclusión.

    Based on this, people with these difficulties may encounter a series of accessibility problems:

    • Device management : Telephones, computer is, ATMs and digital television most of the time are not designed and placed, in the case of ATMs, paying attention to the needs of people with disabilities. The variety of terminals is very large, what you should look for is to follow the tendency to reduce them and access all the services through a few. More and more websites are visited with all kinds of devices
    • Interaction with interfaces : Menus, navigation bars and buttons are not usually accessible from a variety of adapted terminals.
    • Access to content : The contents that are accessed from the same device are increasing and this rapid growth does not usually address the specific needs of the disability.

    :: Levels of priority and compliance with web accessibility ::

    Web accessibility is divided into a spectrum of three priority levels :

    1. Priority 1: are those points that a Web developer has to meet since , otherwise, certain user groups could not access to the website information.
    2. Priority 2: are those points that a Web developer should comply with, otherwise, , be very difficult to access information for certain groups of users.
    3. Priority 3: are those points that a Web developer should comply with because, otherwise, some users would experience certain difficulties in accessing information .

    Based on these verification points, the levels of compliance are established:

    1. Level of Conformance "A": all points Priority 1 verification is satisfied.
    2. "Double A" Level of Conformity: all priority check points 1 and 2 are satisfied.
    3. "Triple A" Compliance Level: all the checkpoints of priority 1,2 and 3 are satisfied.

    :: Basic rules of web accessibility ::

    To create an accessible web it is necessary to follow the 14 guidelines and its control points but there are some some basic rules, which summarize them in the following:

    1. Follow the W3C standards . Currently the two standard languages ​​for the creation of websites are HTML 4.01 and XHTML 1.0. Fulfilling any of the two standards facilitates accessibility.
    2. All images must have an alternative text (alt attribute) that will be displayed by browsers that do not show images (screen readers, computers with a slow connection, text browsers). This attribute must contain the description of the image (not the name) unless this description is purely decorative.
    3. The links must have a significant name of the place they are pointing to. This text must be comprehensible outside its context and, therefore, it does not serve the much used "click here."
    4. To organize the information within the webpage you must use the h1, h2 …, ] with them we must organize both the content and the format of the titles.
    5. The use of tables for layout should be avoided, unless they are essential. If they are used, make sure that the content can be read in a linear manner and ensure that the different cells do not have excessive content.
    6. Whenever possible, style sheets (CSS) should be used to separate the content of the presentation and should be syntactically correct.
    7. In case of adding multimedia content (sound, animations and / or video) subtitles (for sound) must be provided ] or description of animations and videos.
    8. If using frames a label must be used that incorporates the necessary links for navigation. Each frame should be perfectly identified
    9. If scripts, applets or plugins not accessible are used, alternative content should be offered.
    10. If used Images with long or complex information should be properly described. For this, the longdesc attribute can be used
    11. If image maps are used, it is convenient to provide redundant links in text format for each active zone of the map.
    12. They should be used easy-to-read letter typologies .

    In this video, we review some standards and the importance of web accessibility:

    Now how do we accomplish all this if we use WordPress?

     search for accessible themes in wordpress

    :: Word Accessibility in WordPress ::

    WordPress offers a special page on web accessibility that offers us tips and tools to make our WordPress accessible. There is also a summary of practices from accessibility in CODEX . However, although much better than the rickety reference page in they are not the best sources of knowledge about it, so I recommend that you review all the other points discussed in this article, and especially the references at the end of it.

    The first thing to keep in mind is that WordPress is not different from any other web so the guidelines and rules to follow are exactly the same. same as we have already seen . However we can take some shortcut that will save us work:

    1. Uses an accessible WordPress theme . Although there are not many, in the official repository there are some issues, specifically eight, that comply with the tag " accessibility-ready ". One of them is the default WordPress theme, TwentyFourteen. Also there is a child theme of the TwentyTen theme that complies with the accessibility standards.
    2. Use accessible plugins . Always use some accessible version of the plugins you use, in addition to those that help you meet the accessibility guidelines:
      • Search plugins that comply with the WAI-ARIA standard . It's not all we need to meet but it's a good start. Do not search for " accessibility " or " accessible " because what you find is a broken sack where you'll see access control plugins, user permissions and a little bit of everything.
      • WP Accessibility . It's a good start because it identifies and solves common accessibility errors (some fixes them automatically) as incorrect link attributes (which I'm very much guilty of) and adaptations of standard WordPress tags to accessibility guidelines. Highly recommended .
      • WP Accessible . Despite its name, today it does not even look like the previous one because it only offers an accessible Twitter timeline widget, the rest is yet to come, but for one thing it starts.
      • Contact Form 7 : Accessible defaults : Convert the Contact Form 7 plugin forms to accessible in all their fields.
      • SOGO Accessibility : Add several settings to adapt WordPress to users with accessibility problems, such as contrast , sizes, etc.
      • BotDetect Captcha is a plugin that offers a system of control of undesirable users but complying with the accessibility norms, so as not to make undesirable users who are not, only for their disability.
      • YouTube Shortcode . A short code version (or shortcode ) to insert YouTube videos on your site but in an accessible way.
      • Accessible tag cloud . An accessible alternative to the WordPress tag cloud widget.
      • Accessibility widget . Add to your sidebar a widget from which to increase or decrease the font size of your site, very useful for users with eyesight and other problems.
      • Zoom widget . Like the previous one, add a widget to increase the size of your website's elements.
      • Accessible_blank . Open the links in another window or tab but complying with the accessibility standards. Great plugin, although not updated long ago, of our friend Cristina Eslava.
      • Accessible external links . Similar to the previous one, it offers a way to apply the link destination but in an accessible way.

    Manrique López did a good summary in this presentation that exposed the past WPDay Madrid :

    :: How to check the accessibility of your website ::

    There are a series of practices you can carry out to check the accessibility of your website:

    1. Use an automatic accessibility tool and a browser validation tool. Please, check that the software of the tools deals with all accessibility problems, such as the meaning of the text of the link, the applicability of a textual equivalent, etc. Following this list you have a couple of good free online tools.
    2. Validate syntax (For example, HTML, XML, etc.).
    3. Validate style sheets (For example, CSS)
    4. Uses a text-only browser or an emulator.
    5. Uses various graphics browsers with:
      • Sounds and graphics loaded.
      • Graphics not uploaded.
      • Sounds not loaded.
      • Without mouse.
      • Frames, scripts, style sheets and applets not loaded.
    6. Uses several browsers old and new.
    7. Uses a browser by voice, a screen reader, a magnification software, a small visualizer, etc.
    8. Uses spelling and grammar verifiers . Anyone who reads the page with a speech synthesizer may not be able to decipher what the synthesizer plays because of a misspelling. Eliminating grammatical problems increases comprehension.
    9. Check your website for clarity and simplicity . Readability statistics, such as those generated by some word processors, can be useful indicators of clarity and simplicity. Better yet, ask an experienced (human) editor to review the clarity of the written text. Editors can also increase the usefulness of a text by identifying potential intercultural problems that may arise because of the language or icons used.
    10. Invites people with disabilities to check the web . Skilled and novice disabled users will provide valuable feedback on accessibility or problems of use and its severity.

    Finally, it never hurts to use tools from automatic web accessibility check like these: [19659024] eXaminator (in Spanish)

  9. HERA (in several languages, also in Spanish)
  10. Both offer a quick tool that analyzes if your website complies web accessibility standards offering advice on how to solve it

    Does this blog comply with accessibility standards ?, sadly not yet.

    Web accessibility is not easy if you do not apply it from the beginning. In many cases they are habits that you must acquire when inserting links or content, so it is better if you start as soon as possible, and I have been doing it for many years, which I suppose would have to have a good time to make it accessible … but I am in it little by little and I hope to have it nice and accessible in a short time.

    The advantages are obvious, as we have seen, and in fact it is not so complicated if you follow some simple guidelines and get used to them.


    1. Benefits of web accessibility .
    2. Spanish legislation on web accessibility .
    3. Brief Web Accessibility Guide (W3C).
    4. Web Accessibility Guidelines in DiscapNET .
    5. web accessibility .
    6. Repository Official WordPress Theme .

    NOTICE : This publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

    Loading …

    That may also help you:

Webs for the blind

I discover that there is a website " " where they offer a wonderful solution for people with visual disabilities it is a component that provides a voice to any news written on a Web page or a Blog.

The system consists of the automatic creation of a sound file in MP3, for each entry or article that we post on our blog.

A prime objective of the project is to facilitate access to the large amount of information present in the blogosphere to people with visual problems.

By means of a simple installation of the Plugin, in several minutes we will provide our Blog with sound in each and every one of the entries of this.

Alt and Title – Differences and Obligations • WordPress Help

As it seems that these things like we are going to deal with another basic aspect of the HTML edition that you can, and should, use at the time of writing / personalizing your blog WordPress .

Today I want to deal with an almost mystical issue: the difference between the attributes ALT and TITLE applicable to links or images, and with some example of their use.

First a description of their assignment …

Differences between Alt and Title

TITLE – This label or attribute can be used in both images and links, and is responsible for offering an emergent description (tooltip) of the image or link. It works in all browsers.

ALT – With this HTML tag we define the alternative text of the images, which is displayed when the image is not available or to guarantee its accessibility. It is a MANDATORY label in the images, if you do not want to include any descriptive text put what you want (^, *, etc). It also works as a tooltip in Internet Explorer.

Use of ALT and TITLE

As we have seen in the descriptions, both can coexist in the same link to images, not the TITLE one that should only be applied to the links.

In this example we see how TITLE is applied to a link:

] And what we would see would be a text, linked to a URL and that placing the mouse cursor over the link would show us the tooltip " Click here to go to WordPress Help ":

WordPress Help

Regarding the use of ALT and TITLE in images, the results will be different, as we have said, depending on the browser that we use. However, ALT will always be COMPULSORY while the use of TITLE is optional, although necessary to meet the standards of W3C only useful for adding additional information.

For example, as …

the attribute ALT is the one that would serve in case of not showing the image, and TITLE only as additional information, by passing the cursor over it, as you can see here …

 Logo wordpress with heart

If we used a non-existent image we would see the alternative text, defined by ALT, as in this example:

 Logo wordpress with heart

that, being an image non-existent we would see the text …

This, of course, not only can you do it in the WordPress HTML editor, but you can also apply the ALT and TITLE attributes from the visual editor, in the image loader. By default WordPress will add the ALT tag, which will be the name of the file without the extension (better if you change it), but the TITLE tag must be added on your own, including a text in the inclusion box of " Description "as the inclusion box of" Legend "is an attribute of WordPress, which identifies as ' caption ', nothing to do with what we are dealing with.

In this example you can see the code and result of the use of both from the utility of inserting WordPress images:

The resulting image is this, with ALT tag, TITLE tag but also the CAPTION of WordPress …

 How to insert Alt in WP "width =" 500 "height = "223" srcset = " 621w, alt-wordpress-300x134.png 300w "sizes =" (max-width: 500px) 100vw, 500px

How to insert Alt in WP

I hope you find it useful and instructive.

NOTICE : this Publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you: