# data[].attributes.attachment_link.title
Free Logo Maker | Create Your Own Logo | FreeLogoDesign

# data[].attributes.attachment_link.description
Try our free logo maker. Trusted by 30M+ businesses, our online logo generator makes it easy to find the best logo for your business. Make your logo now!

# data[].attributes.attachment_link.title
Beautiful Free Images & Pictures | Unsplash

# data[].attributes.attachment_link.description
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

# data[].attributes.attachment_link.description
Use this free Website Speed Test to analyze the load speed of your websites, and learn how to make them faster.

# data[].attributes.attachment_link.description
Check for broken links on your website with our free online tool. Sign up and schedule automatic checks to keep your website fresh and up to date.

# data[].attributes.attachment_link.readable_text
Normal Text

The five boxing wizards jump quickly.

Large Text

The five boxing wizards jump quickly.

Graphical Objects and User Interface Components

Web accessibility testing can be difficult! The experts at WebAIM can audit your web site and provide a detailed report to help you remediate accessibility and WCAG compliance issues.

Learn more about WebAIM Evaluation Services

Explanation

Enter a foreground and background color in RGB hexadecimal format (e.g., #FD3 or #F7DA39) or choose a color using the color picker. The Lightness slider can be used to adjust the selected color.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Hint: Colorzilla is an excellent tool for extracting the color value from any page element. Additionally, WAVE can analyze contrast ratios for all page text elements at once.

Use our link contrast checker to evaluate links that are identified using color alone.

# data[].attributes.headline
How to setup closed captioning on YouTube videos 

# data[].attributes.subject
How to setup closed captioning on YouTube videos 

# data[].attributes.attachment_link.readable_text
Subtitles and closed captions open up your content to a larger audience, including deaf or hard of hearing viewers or those who speak languages besides the one spoken in your video. If you already have captions or subtitles, get help editing or removing existing captions.

Note: If you're in YouTube Studio, click Creator Studio Classic in the left menu to follow these steps.

1. Go to your Video Manager by clicking your account in the top right > Creator Studio > Video Manager > Videos.

2. Next to the video you want to add captions or subtitles to, click the drop-down menu next to the Edit button.

3. Select Subtitles/CC.

4. Click the Add new subtitles or CC button.

5. Choose how you want to add or edit subtitles or closed captions to your video:

Create subtitles or closed captions
You can create new subtitles or closed captions from scratch. You can also edit drafts in progress if you've turned on community contributions for your channel.

Check out our video on creating subtitles and closed captions or follow these instructions:

1. Choose the language for the subtitles or closed captions you want to create. Use the search bar to find languages that don't automatically show in the list. If you've already started working on a language, you can select it from My drafts.

2. In the draft for the language you want to work on, play the video. If your fans have added updates since your last version, you'll see a "Your fans submitted an update" notice at the top of that language draft's screen.

3. When you get to the part where you want to add something, type your content into the box. Don't forget to add text describing other sounds happening in the video. For example, you can add sounds like applause or thunder as [applause] or [thunder] so viewers know what's going on in the video.

4. If you need to, adjust when the caption starts and ends by dragging the borders around the text under the video.

5. Repeat this process for all the spoken words in the video. If you don't have time to finish the whole video, your changes will be saved in your drafts and you can pick up again later.

6. When you're done, select Publish.

To speed up your work, you can also use these keyboard shortcuts:

Shift + left arrow: Seek back one second.

Shift + right arrow: Seek forward one second.

Shift + space: Pause or play the video.

Shift + enter: Add a new line.

Shift + down arrow: Edit next subtitle.

Shift + up arrow: Edit previous subtitle.

Enter: Add the subtitle.

Upload a file

If you have a subtitle and closed caption file, you can upload it to your video. These types of files contain both the text and time codes for when each line of text should be displayed. Some files also include position and style information, which is especially useful for deaf or hard of hearing viewers.

Before you start, make sure that your file type is supported on YouTube.

1. Sign in to YouTube Studio.

2. From the left, select Videos.

3. Click on the title or thumbnail of a video.

4. Select the Advanced tab.

5. Select Upload subtitles/cc.

6. Choose between With timing or Without timing and select Continue.

7. Choose a file to upload.

8. Select Save.

Creator Studio Classic instructions

Transcribe and auto-sync (original video language only)

You can transcribe your video and automatically line up your text with the speech in the video. A transcript contains the text of what is said in a video, but no time code information, so you need to set the timing to sync with your video.

Note: Since the transcript text is automatically synchronized to your video, the transcript must be in a language supported by our speech recognition technology and in the same language that's spoken in the video. Transcripts are not recommended for videos that are over an hour long or have poor audio quality.

1. Select Add new subtitles or CC. Choose the language for the subtitles or closed captions you want to create. You can use the search bar to find languages that don't automatically show in the list.

2. Select Add new subtitles or CC.

3. Underneath the video, click Transcribe and auto-sync.

4. Type all of the spoken audio in the text field. If you're creating closed captions, make sure to incorporate sound cues like [music] or [applause] to identify background sounds.

5. Click Set timings to sync your transcript with the video.

Setting the timings can take a few minutes. While you wait, you'll be brought back to the video tracklist. Once it's ready, your transcription will automatically be published on your video.

Use automatic captioning

YouTube can use speech recognition technology to automatically create captions for your videos. If automatic captions are available, they'll automatically be published on the video. Learn how to review, edit, or unpublish automatic captions.

Automatic captions are available in English, Dutch, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish.

# data[].attributes.attachment_link.title
Add your own subtitles & closed captions

# data[].attributes.attachment_link.description
Subtitles and closed captions open up your content to a larger audience, including deaf or hard of hearing viewers or those who speak languages besides the one spoken in your video. If you already have captions or subtitles, get help editing or removing existing captions.

# data[].attributes.attachment_link.readable_text
CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

This tutorial will teach you CSS from basic to advanced.

Start learning CSS now "

Examples in Each Chapter

This CSS tutorial contains hundreds of CSS examples.

With our online editor, you can edit the CSS, and click on a button to view the result.

CSS Example

body {
background-color: lightblue;
}

Try it Yourself "
Click on the "Try it Yourself" button to see how it works.
CSS Examples

Learn from over 300 examples! With our editor, you can edit the CSS, and click on a button to view the result.
Go to CSS Examples!
Use the Menu

We recommend reading this tutorial, in the sequence listed in the menu.

If you have a large screen, the menu will always be present on the left.

If you have a small screen, open the menu by clicking the top menu sign ☰.

CSS Templates

We have created some responsive W3.CSS templates for you to use.

You are free to modify, save, share, and use them in all your projects.
Free CSS Templates!
CSS Exercises

CSS Quiz

Test your CSS skills with a quiz.
Start CSS Quiz!
My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

CSS References

At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more.

Kickstart your career

Get certified by completing the course

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.readable_text
Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:
Click on the "Try it Yourself" button to see how it works.
HTML Examples

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!
Go to HTML Examples!
HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

HTML Quiz Test

Test your HTML skills with our HTML Quiz!
Start HTML Quiz!
My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study W3Schools without using My Learning.

HTML References

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

Kickstart your career

Get certified by completing the course

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.readable_text
The Web Designer Series is supported by Wix.com, a free Flash online builder that makes website creation a breeze. Click here to create your own website now.
According to Prevent Blindness America, 53.2 million Americans aged 45 or older have some form of visual impairment, from mild to severe, and about 18% of those affected are "legally blind." Despite their visual impairments, many of those people use the Internet every day, just like you and me. Further, as more and more people over the age of 50 become comfortable with technology, Internet usage among this demographic will only increase in coming years.

The web is full of tips on how to design websites for blind users, most of which are geared toward making your website accessible to screen readers. But as you can tell by looking at the numbers above, there is a large middle ground. The vast majority of individuals with visual impairments, even those considered legally blind, don't need or use screen-reading software. However, the web can still be a difficult and cumbersome place to navigate when one can't quite see it clearly.

Here are a few tips and techniques for making your site more accessible to these visually impaired users - and why they're important.

1. Make Allowances For Enlarged Text

Often times, simply making text larger is all that a user requires. Consider offering alternate stylesheets with larger font sizes and make sure your layout doesn't break when text-only zoom is enabled in the browser. Many visually impaired users will want to zoom in on the text without changing the scale of the entire site layout, which can lead to difficulties scrolling and tracking text over long lines.

Depending on your site's target market, you may also want to consider making the default font a few points larger, and if you're publishing articles or large quantities of text, it's a good idea to offer text-only versions, so the user can then manipulate the text however he likes.

2. Contrast is Key

Eye diseases like Retinitis Pigmentosa, Glaucoma, Retinopathy and cataracts (some of the most common eye disorders out there) all lead to a significant decrease in contrast sensitivity - that is, the eye's ability to differentiate between similar shades and levels of brightness.

But today's layouts are detailed-oriented, often utilizing subtle gradients and slight shifts in value to create clean, modern, unobtrusive interfaces. For a user with normal eyesight, this makes for a very pleasing visual experience. To a user who struggles with contrast sensitivity, however, it can be a literal headache.

Consider offering a second version of your site with more contrast between elements. Make use of bold text for added readability on low-contrast items and avoid very thin fonts. Also, don't use any JavaScript or CSS techniques that would prevent users from highlighting elements of the page with their mouse or change the default highlight behavior. Many visually impaired users make use of highlighting as a quick trick to increase contrast and to aid visual focus.

3. Be Mindful of Colors for Action Items

Genetic colorblindness affects about 8% of all men and about 0.5% of all women to some degree. Then there's acquired color blindness, which can result from eye disease or injury (such as glaucoma or cataract) and drives the total number of colorblind users even higher. It may not always be feasible to offer these users an entirely different color scheme, and most users generally accept this. However, there is one place, where the use of color should be given the utmost attention - action items. When creating buttons or notices that call the user's attention and require their direct interaction, try to avoid using color combos that are easily confused by colorblind users (red and green, blue and yellow) and make sure these elements contain clear, visible text or iconography that makes their purpose clear.

Placing a red "cancel" button next to a green "submit" button, for example, might cause visual confusion to a user who is red-green colorblind. Similarly, users with the seemingly misnomered "blue-yellow" colorblindness (more common in acquired colorblindness) are less able to differentiate between shades of green and blue.

4. Let Desktop Users Browse Your Mobile Site

If you offer a mobile version of your web site, don't restrict it only to mobile devices. Layouts optimized for the mobile web are typically, by nature, more visually accessible than their more grown-up counterparts. Elements are often simplified (and thus easier to scale), more focus is given to text, and there is less overall visual clutter to potentially confuse users who have blurred vision or difficulties with contrast and color. Giving anyone access to the mobile version of your site can be a quick way to increase accessibility without adding a lot to development costs.

Note, though, that while they can be quite useful for sighted persons with vision problems, mobile websites that utilize large amounts of JavaScript and AJAX functionality are not ideal solutions for blind users who need to access the web via screen reading technology.

5. Use Keyboard Shortcuts to Aid Navigation

Series Supported by Wix.com
In addition to being useful to persons with screen readers, keyboard shortcuts can make site navigation for the visually impaired user far easier. With the addition of keyboard commands, it's possible to navigate a site with the use of arrow keys and a few quick keystrokes, eliminating the need to follow a mouse cursor across a screen - and the associated need to keep shifting visual focus. This can go a long way toward reducing eye strain and frustration. Many users with visual impairments surf the web on large monitors (23" or bigger), which can lead to a lot of head and eye movement, particularly at shorter focal distances. The less time the user has to spend following the cursor (which can easily become lost) around the screen, the better.
The Web Designer Series is supported by Wix.com, which brings amazing technology home to everyday people. Discover the amazing simplicity of its online Flash builder and enjoy creating beautiful websites with powerful drag and drop interface.

More Design Resources from Mashable:
Image courtesy of iStockphoto, nu_andrei

- A 12-Step Guide to Fostering Your Creativity
- 8 Powerful & Inexpensive Desktop Design Apps
- HOW TO: Get Started with the Less Framework
- 8 Essential Web Typography Resources
- HOW TO: Turn Your Foursquare Data Into an Infographic

# data[].attributes.attachment_link.title
5 Ways to Ensure Your Site Is Accessible to the Visually Impaired

# data[].attributes.attachment_link.description
The Web Designer Series is supported by Wix.com, a free Flash online builder that makes website creation a breeze. Click here to create your own website now. According to Prevent Blindness America, 53...