yle Guide Web Style Guide Prepared by Digital Pulp
Introduction This guide is a resource for designers and developers working on digital applications for the main Georgetown.edu site. Unless otherwise noted, it refers to elements in the 1200pt desktop page layout as a baseline for visual consistency. Contents Grid & Breakpoints Colors Typography Image Styles Logos & Icons Interface Components Sample Pages Appendix: Creating Accessible Content
Grid & Breakpoints Grid At 320, the margins and Desktop and tablet views of the site use a 48 column grid with no margins or gutters. gutter are 20pt wide. The mobile layout has two columns, outside margins, and a single gutter. 320pt, 2 columns 1200pt, 48 columns Breakpoints The maximum content width for this site is 1800pt. On screens larger than 1800pt, background images and colors The site automatically detects a user’s screen size and will continue to extend infinitely, but all other content remains displays an optimal view for that screen size. The primary fixed to the content area of 1800pt to ensure the best user breakpoints are as follow: experience. A mockup of the XL desktop view for a 2000pt screen can be found in the Responsive Rules .sketch file. Mobile: 320-767pt Tablet: 768-1023pt Desktop: 1024-1800pt We design comps for screen widths of 320pt (mobile), 768pt (tablet), and 1200pt (desktop). However, these comps do not necessarily represent the breakpoints of modules. Content-focused breakpoints are documented unique components in the Responsive Rules .sketch file.
Colors Accessibility Primary Colors Indicates that text in this color on a White or Light Gray background (or White or Light Gray text on a Georgetown Blue Georgetown Gray background of this color) is considered accessible #041E42 #63666A according to WCAG AA recommendations for text- background contrast. Secondary Colors Pantone 293 (Hovers) Pantone Cool Gray 4 #003DA5 #BBBCBC Neutrals Dark Gray (Body Text) Divider Gray Light Gray (Backgrounds) White #4A4A4A #CCCCCC #F0F0F0 #FFFFFF Interface Keyboard Focus Error Red #00A1CA #D50032
Typography: Fonts The site font families are Adobe Caslon and Futura. Different colors, weights, and sizes of these fonts are used to build the typographic hierarchy. Common styles are outlined on the following page. Adobe Caslon ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() Futura ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*() ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890!@#$%^&*()
Typography: Styles The fonts used on this site are Adobe Caslon and Futura. Below are some common type styles that comprise the typographic hierarchy of the site. This is not a comprehensive listing of every type style in use. Type on Light Background Type on Dark Background Title Title H1 Headline H1 Headline H2 Headline H2 Headline H3 Headline H3 Headline H4 Headline H4 Headline H5 Headline H5 Headline Category/Eyebrow Category/Eyebrow Body Copy X-Large Body Copy X-Large Body Copy Large Body Copy Large Body Copy Regular Body Copy Regular Body Copy Small Body Copy Small Link (match surrounding type size) Link (match surrounding type size) Link Hover (match surrounding type size) Link Hover (match surrounding type size) Picture caption lorem ipsum. Picture caption lorem ipsum.
Image Styles The site design is responsive, meaning that content automatically scales and rearranges for the best possible display based on the user’s screen size. The following table catalogues how images display at the 1200pt desktop view and recommend CMS upload sizes that will ensure crisp images even on retina devices. Component Display Size Upload Size Ratio Note C1 Homepage Hero Video or Image @1x at 1200pt Recommended minimum Responsive Choose textural C3 Promo Block grayscale image C5 Testimonial 100% vw x 90% vh 2000pt x 1125pt Variable C6 Video Block (Video Poster) 800pt x 600pt 2000pt x 1500pt 4:3 Choose textural C6 Video Block (BG Img) 600pt x 600pt 1800pt x 1800pt 1:1 grayscale image 800pt x 450pt 2000pt x 1125pt 16:9 Choose image with C10 Events Block Featured Img Variable* ≥ 3000px x 1688px Variable focal point in center C11 Three Cards with BG (Card Img) C11 Three Cards with BG 900pt x 600pt 2000pt x 1333pt 3:2 Choose textural (BG Img) 350pt x 197pt 1050pt x 591pt 16:9 grayscale image C12 Level 1 Landing Page Hero Variable* ≥ 3000px x 1688px Variable Choose textural grayscale image C13 Q&A Carousel (Slide Img) 1200pt x 450pt 2000pt x 750pt Variable C13 Q&A Carousel (Speaker Img) C13 Q&A Carousel (BG Img) 525pt wide 1575pt x 1575pt Variable 75pt x 75pt 225pt x 225pt 1:1 C14 Stats Block (BG Img) Variable* ≥ 3000px x 1688px Variable Variable* ≥ 3000px x 1688px Variable *Display size is determined by component height. Continued on following page
Image Styles, continued Component Display Size Upload Size Ratio Note C15 Explore More (2 Across) @1x at 1200pt Recommended minimum Responsive Choose image with C15 Explore More (3 Across) focal point in center C16 People Stories (Person) 50% vw x 400pt 1800pt x 1013pt Variable Choose image with C16 People Stories (BG Img) focal point in center C17 Level 2 Landing Page Hero 33% vw x 400pt 1800pt x 1013pt Variable CW3 Text with up to 3 CTAs Choose textural CW4 Text with 1 CTA 350pt x 350pt 1050pt x 1050pt 1:1 grayscale image Article Hero Image† Variable* 2000pt x 1125pt Variable Choose image with Event Featured Image† focal point in center Program Featured Image 1200pt x 400pt 2000pt x 667pt Variable Choose image with 200pt x 112pt 600pt x 336pt 16:9 focal point in center 650pt x 365pt 2000pt x 1125pt 16:9 Choose image with 1200pt x 550pt 2000pt x 1125pt Variable focal point in center 1200pt x 550pt 2000pt x 1125pt Variable 650pt x 366pt 2000pt x 1125pt 16:9 *Display size is determined by component height. † This featured image is used to promote content site-wide in variety of sizes.
Logos & Icons Single-Line Logo Stacked Logo Logos Abbreviated Logo Single-Line Logo Stacked Logo Abbreviated Logo Icons Favicon
Interface: Navigation The top-tier site homepage has a unique, transparent navigation bar to allow for a richer gateway experience upon arriving to the site. Interior pages display a tall nav with a blue background partially or completely blue background, depending on whether a featured image has been set for the page. The tall nav transitions seamlessly into the sticky nav, so that users always have access to the primary navigation links and search. Transparent Nav (Homepage Only) Who We Are Campus & City Academic Life Research Admission & Aid News Events Giving Info for Tall Nav with Featured Image Who We Are Campus & City Academic Life Research Admission & Aid News Events Giving Info for Tall Nav without Featured Image Who We Are Campus & City Academic Life Research Admission & Aid News Events Giving Info for Sticky Nav Who We Are Campus & City Academic Life Research Admission & Aid
Interface: Navigation Dropdowns Navigation Dropdown, Level 1 Who We Are Campus & City Academic Life Research Admission & Aid Living in DC 28 Georgetown Alumni Serving in Service & Action the 116th Congress Campus Life Wellness & Safety More than two dozen alumni continue Georgetown’s Athletics long legacy of public service Navigation Dropdown, Level 2 Who We Are Campus & City Academic Life Research Admission & Aid Living in DC Housing & Dining Service & Action Campus Life Graduate Students & WeLive Wellness & Safety Athletics Clubs & Organizations LAorrtesm& iCpuslutumredolor sit amet, consectetur adipiscing elit DonecSettuoddeionsteLdifneunBclocognvallis pharetra. Fusce rutrum sollicitudin dictum porta leo.
Interface: Text & Button CTAs Hover effect ease in and out for a transition duration of 0.3 seconds. Text CTAs Read More Read More Read More Read More Normal Read More Read More Hover Read More Focused Read More Dev Specs 5px Read More Read More Button CTAs Read More Read More Primary, Normal Read More Hover Focused Read More Secondary, Normal Dev Specs Read More Read More 55px 32px Icon Buttons Normal Hover Focused
Interface: Forms Form Fields Error! This field is required. Keyboard Focused Neutral Field First Name Helper Text First Name* Helper Text Completed, Out of Focus Active Input First Name Jennifer First Name Jen Long Text Entry Field Error State Your message First Name* Radio Buttons Helper Text Neutral Dropdown Item Keyboard Focused Selected Department Helper Text Checkboxes Neutral Keyboard Focused Selected
Components Notes C1 Homepage Hero Limit multi-slide video loops to 10 seconds and single-slide video loops to 1 minute. See Appendix for tips on choosing images for Variations good legibility. Multi-slide with video(s) and photo(s) Single slide with video or photo News Events Giving Info for Who We Are Campus & City Academic Life Research Admission & Aid One Day at Georgetown 123 Watch Full Video News Events Giving Info for Who We Are Campus & City Academic Life Research Admission & Aid One Day at Georgetown Watch Full Video
Components C2 Quick Links Notes Keep button label lengths short, around 20 characters or less. Avoid adding more than 3 buttons to this block to avoid overwhelming users with options. Quick Links Explore Programs Academic Calendar Visit Georgetown
Components Recommended Copy Lengths (Incl. Spaces) C3 Promo Block with Image Headlines: 30 characters or less Description: 250 characters or less Variations CTA: 30 characters or less Text left or text right Multiple images or single image With or without CTA A Sense of Belonging The Hilltop: It's a community that's bursting with energy and ideas. You feel it in residences built around shared passions and in graduate co- living spaces. You see it in the way we own our many differences. At Georgetown, you belong. Explore Campus Life 1 of 5 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam in posuere mi. Etiam vitae orci at nulla mattis dapibus vel eu leo. Donec facilisis eros metus, vel dignissim lacus dignissim quis. Donec et aliquam mauris. Pellentesque sagittis consequat facilisis.
Components C4 Text-Only Promo Block Recommended Copy Lengths (Incl. Spaces) Headlines: 30 characters or less Description: 250 characters or less CTA: 30 characters or less The Place Where Policy is Made With the Hill on your doorstep, you'll have access to policymakers, a window on the process and even a chance to participate. Lorem Ipsum
Components C5 Testimonial Block Recommended Copy Lengths (Incl. Spaces) Quote: 250 characters or less CTA: 30 characters or less “Since I started the LGBTQ Alliance as a sophomore, I’ve been overwhelmed by the support we’ve received from the student body and the administration.” Jessica's Story
Components Recommended Copy Lenghts (Incl. Spaces) C6 Video Block Headlines: 30 characters or less Description: 250 characters or less Variations CTA: 30 characters or less Text left or text right With or without CTA DC: The World at Your Doorstep Washington is the epicenter of global politics. It’s also your hotspot for art, activism, entrepreneurship and public service. Think of the city as an extension of campus. Whether you intern at the Capitol Hill, conduct research for an NGO or take time out at an embassy party, it's your DC. DC: Our City DC: The World at Your Doorstep Washington is the epicenter of global politics. It’s also your hotspot for art, activism, entrepreneurship and public service. Think of the city as an extension of campus. Whether you intern at the Capitol Hill, conduct research for an NGO or take time out at an embassy party, it's your DC.
Components Meet Our Faculty C7 Three Stories Variations White Background Gray background Your Daily Brush with Greatness Professor Jan LaRocque to Professor Sherry NIH Awards Grant to Study Repair of Harmful DNA Linkon’s Latest Book Psychology Professor with New Grant Defines a New Literary Anna Johnson for Genre Longitudinal Pre-K Study Linkon anthologizes and annotates poetry, essays, stories, art, and film The longitudinal study will examine by creators from communities the processes in kindergarten affected by deindustrialization through fourth-grade classrooms that support children's self- regulatory skills More News All News Red Square: A Hub for Free Sharing Space in Service: The DC Schools Speech and Grilling WeLive Graduate Project Housing The longitudinal study will Praesent semper, elit sed tempor examine the processes in blandit, orci massa fringilla erat, kindergarten through fourth- id viverra risus metus vitae diam grade classrooms that support children's self-regulatory skills
Components C8 Social Media Grid @GeorgetownUniversity Social Media Directory
Components C9 News Block University News All News Athletics Research Student Athletes Dig Into Patient Narrative, Endangered Issues of Power and Privilege Coral Projects Win Undergraduate Research Bioethics Showcase Life-Saving Device Being Projects by Maddy Rice (C’20) and Sam Lee (C’18) win this year’s Developed by Grad Student Bioethics Research Showcase, a juried exhibition of Georgetown with Heart, Lung Damage undergraduate research and scholarship. Research NSF Awards Go to Grad Students Researching Cancer, Cognition, Salt Marshes
Components C10 Events Block Notes For a seamless appearance, use a featured image with a darker background, as shown. Upcoming Events All Upcoming Events Photo: Jane Goodall at Gaston Hall, 2009 Sept. 7 Sept. 29 Aug. 30 Service Opportunity: Rosh Hashanah Hoyas for Others Day Services CAB Activities & Organizations Fair Lorem Ipsum Dolor Lorem Ipsum All Day Event 5pm Healy & Copley Lawns 12pm–3pm
Components C11 Three Equal Cards Supporting Mind & Heart The Nine Dimensions of Student Advocacy, The Problem of God: Wellness Activism, and Support Making Meaning
Components Recommended Copy Lengths (Incl. Spaces) C12 Level 1 Landing Page Title: 20 characters or less Description: 350 characters or less Notes For best results, choose an image with a centered focal point and darker colors towards the top. Home / Who We Are Who We Are You’re more than a brilliant mind. You’re someone with passions, beliefs and values, all shaped by your past experiences. At Georgetown, we’ll challenge you to leave your comfort zone, support you while you question everything, and give you life practices that will help you do your best work — for yourself and the world.
Components Recommended Copy Lengths (Incl. Spaces) C13 Q&A Carousel Questions: 30 characters or fewer Answers: 200 characters or fewer Notes Limit to 2-3 questions per slide For best results, choose a featured slide image with a centered focal point. My DC What’s your favorite spot in DC? I love spending time at lorem ipsum, because it’s great for people watching! It’s easy to get there thanks to the GUTS bus. I love spending long afternoons there when the weather is nice. Lorem ipsum dolor sit amet? Mauris in pharetra nunc. Nullam semper magna ac malesuada feugiat. Pellentesque luctus elit eu ligula fringilla ornare. Carlie, Undergraduate ‘20 Read Carlie's Story 1 of 5
Components C14 Stats Recommended Copy Lengths (Incl. Spaces) Number: 6 digits or less Subheading: 20 characters or less Description: 55 characters or less 1789 123 246 Year Founded Service Projects Lorem Ipsum The first Jesuit University for Graduate and in magna massa, hendrerit in the United States Undergraduate students malesuada velit
Components Notes C15 Explore More For best results, choose textural images or images with focal point at center. Variations Limit CTA text to 20 characters, including spaces. Three Across Two Across Our History Our Story The Whole Person Residential Life Getting Around
Components Recommended Copy Lengths (Incl. Spaces) C16 People Stories Quotes: 150 characters or less CTAs: 30 characters or less Notes Feature stories in multiples of three. Limit number of featured stories to 9 to avoid overwhelming users. Our Stories Student Stories “I picked Georgetown because “I was the first person in my “By my summer internship, I was I wanted college to be about family to go to college, and my running marketing campaigns for advisor made sure I found the more than getting a job.” a national nonprofit.” support and community I Febin's Story needed.” Misty's Story Zohaib's Story
Components Recommended Copy Lengths (Incl. Spaces) C17 Level 2 Landing Page Title: 20 characters or less Description: 350 characters or less Notes For best results, choose an image with a centered focal point and darker colors towards the top. Home / Campus & City / Living in DC Living in DC The Georgetown community doesn’t end at the gates–we’re part of DC and it’s part of us. The city offers global and urban experiences on an epic scale that fuel personal, intellectual and professional growth. Exciting partnerships with DC political and cultural organizations bring world-class guests to campus for talks and panels, residencies and master classes.
Components Column-Width Chaptered Components Variations Notes CW2: Text Only These components are for use on T4 Chaptered Pages only. CW3: Text with Up to 3 CTAs It is recommended that CTAs be limited to 30 characters or less, CW4: Text with 1 CTA including spaces. CW2: Text Only Chapter CW2: Text Only Chapter CW3: Text with Up to 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor nibh tempor CTAs diam dignissim dapibus. Nullam pulvinar aliquet orci, id pellentesque quam tristique at. Nullam a facilisis libero, nec fringilla est. CW4: Text with 1 CTA CW3: Text with Up to 3 CTAs Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor nibh tempor diam dignissim dapibus. Nullam pulvinar aliquet orci, id pellentesque quam tristique at. Nullam a facilisis libero, nec fringilla est. Communities Living with Us Apply for Housing CW4: Text with 1 CTA Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porttitor nibh tempor diam dignissim dapibus. Nullam pulvinar aliquet orci, id pellentesque quam tristique at. Nullam a facilisis libero, nec fringilla est. Learn More
Sample Pages T01 Homepage
Sample Pages T02 Level 1 Landing Page
Sample Pages T03 Level 2 Landing Page
Sample Pages T04 Chaptered Page
Sample Pages T05 News Landing Page
Sample Pages T06 Article
Sample Pages T07 Events Landing Page
Sample Pages T08 Event Detail Page
Sample Pages T09 Basic Text page
Sample Pages T10 Areas of Study
Sample Pages T11 Tag Archive Page
Sample Pages Error 404 Page & Emergency Banner
Appendix: Creating Accessible Content Every Digital Pulp website is built in accordance with WCAG 2.0 Level AA recommendations for Web Accessibility. DP’s approach to Accessibility is comprehensive, from strategy to development. Nevertheless, even a well-built site will fail users if its content is not prepared with Accessibility in mind. Ultimately, site editors assume responsibility for producing materials that all of their users can enjoy. This guide is intended to help content managers understand their users’ Accessibility needs as described by the WCAG guidelines particular to content creation, and how best to attend to them. In This Appendix Guideline 1.1: Text Alternatives Guideline 1.2: Time-Based Media Guideline 1.3: Adaptable Content Guideline 1.4: Distinguishable Content Guideline 2.3: Seizures Guideline 2.4: Navigable Content
Creating Accessible Content Guideline 1.1: Text Alternatives “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” View on W3C What this means for content creators Non-text content like imagery should have meaningful text alternatives that can be accessed by screen reading software. Purely decorative visual content that is not vital to the comprehension of a site does not require a text alternative. Alt text should be descriptive but brief, as the most popular screen readers will stop reading alt text aloud after 125 characters. For more information on writing helpful alt text, see external resources below. For information on video and audio recordings, see Guideline 1.2. External resources • Tips for writing useful alt text
Creating Accessible Content Guideline 1.2: Time-Based Media “Time-based media: Provide alternatives for time-based media.” View on W3C What this means for content creators “Time-based media” is any media that has a runtime, like a video or an audio recording. The Success Criteria for this guideline recognize that media may be prerecorded or live but requires captioning or transcription for both. Recorded media that is already a clearly identified alternative to text (for example, a recording of a poet performing their poem alongside its text on a publication’s website) is exempt. Transcripts: A transcript is a textual representation of content separate from the the media it represents– for example, the textual representation of an audio stream that appears below the audio player on a page. Transcripts of audio should clearly indicate who is speaking, and include notes for non-verbal cues like music or other sound effects that provide important context, offset by parentheses, brackets, or otherwise distinguished from the surrounding text. If a doorbell rings in a radio play, a user reading the transcript should be able to clearly identify the stimulus that caused the actors to answer the door. Transcripts are usually most appropriate for audio-only content. Captions: Captions differ from transcripts in that they are synchronized with their content. This is beneficial to users because they do not need to switch back and forth between video input and a separate transcript. Like transcripts, captions should note non-verbal audio cues that an important to the user’s understanding. Captions are usually most appropriate for audio-visual content. Captions may be automatically generated by YouTube or other software (see resources below) but should always be verified by a human being for accuracy and the inclusion of non-verbal cues. Silent Video: In the same way that still images require meaningful alt text for screen readers, ambient video without any accompanying sound should be accompanied by text that succinctly describes what is presented visually to sighted users. External resources • W3C Multimedia Accessibility FAQ • Why video transcripts alone are not enough for accessibility • Setting up and editing automatic captioning on YouTube videos • Enabling captioning on a YouTube LiveStream
Creating Accessible Content Guideline 1.3: Adaptable Content “Create content that can be presented in different ways (for example simpler layout) without losing information or structure.” View on W3C What this means for content creators Because your website is responsive, and the layout may appear in different configurations on different screen sizes, it is important to consider the dynamic nature of layouts when writing instructional content. For instance, a button that appears to the right of a paragraph of instructions might appear below that paragraph at a smaller screen size, rendering a desktop-accurate instruction to “click the button to the right” illogical on a mobile phone. Users with impaired vision may also be unable to follow instructions that rely on visual cues. User interactions should be labeled clearly and concisely to provide context. For instance, a call to action that reads “Next Page” or “Learn More” is more useful than one that simply says “Click Here.”
Creating Accessible Content Guideline 1.4: Distinguishable Content “Make it easier for users to see and hear content including separating foreground from background.” View on W3C What this means for content creators This guideline refers primarily to the presentation of text on a site. All type styles on your site have been designed to meet the size and contrast guidelines for text supplied by WCAG 2.0, however there may still be areas where a content creator is responsible for ensuring good separation of foregrounds and backgrounds. The most common scenario is text overlapping an image, such as in a page header where the page title and an image occupy the same space. In such cases, programatically applied overlays will darken images to meet accessible contrast ratios, but page editors still have a role to play in selecting complimentary images. When selecting an image background, consider: • How busy or complex is the image? An image with a lot going on, like a photograph of a crowd of people, may produce too much visual noise and compete with the text when used as a background. Images with soft focus or fewer focal points tend to work better. In the examples below, both provide the required contrast ratio between text and its backround needed to be considered accessible, but one is much easier to read. This image is visually “busy” ������ This image is visually calmer ✅ which makes it a poor choice and doesn’t compete with for a text background. Text the text, which makes the is difficult to read. text easier to read. • How does component you’re preparing behave responsively? A face appearing on the right side of the image at a larger screen size could be cropped out or appear behind your text on a smaller device. For best results, refer to component notes and image style chart recommendations in the web style guide. Continued on following page
Creating Accessible Content Guideline 1.4: Distinguishable Content, continued • Ambient video used as background works best when its movement is smooth and subtle, to avoid distracting from foreground content. See also Guideline 2.3 on avoiding video content that may trigger seizures in certain users. When rendering text, creators should keep in mind the following: • The use of real text is preferable to an image of plain text. Should it be necessary to use an image, WCAG 2.0 requires that the image should always show an equivalent of 14pt text or larger (keeping in mind that images may appear smaller on smaller screens) and that these images should have appropriate alt text indicating their content. These guidelines for sizing do not apply to logos or incidental text that appears in photographs or other imagery, but alt text should still reflect any important context text within imagery may supply. For instance, an image of a street sign where the sign itself is the focus should be clearly described in alt text, but a photograph of a person on a street where signage is visible in the background but does not provide meaningful context does not need to be described. • The styling of hyperlinks on your site is automatically applied and has been tested for contrast compliance at its default type size. However, when linking text within a paragraph, editors selecting text for in-line links should consider the length of text they choose. Industry best practices for clickable or tappable objects online recommend a minimum target size of 48pt. For an in-line link, this would refer to the pixel width of the linked text itself. This will vary with typeface and size (and the way these facets render across a responsive site), but a good rule of thumb is to always link more than one word. It is easier for a user with limited dexterity to click this link than to click this link. • Finally, WCAG 2.0 criteria on visual presentation of text specify that, in addition to typographic rules that have already been set by the site design, paragraph text not be justified (as opposed to left aligned) as it becomes difficult for some users to read. Long passages of text that is centered, bolded, italicized, or WRITTEN IN ALL CAPS should also be avoided in the interest of legibility.
Creating Accessible Content Guideline 2.3: Seizures “Do not design content in a way that is known to cause seizures.” View on W3C What this means for content creators In order to protect users with photosensitivities or epilepsy, nothing on a site should flash rapidly (at a rate of three or more flashes per second), as rapid flashing may trigger seizures in some users. Red flashes should be avoided. This is most applicable to video content, which should be produced in such a way as to be safe for all users. All video content, including ambient video (see below), has been designed for your site with accessible user controls allowing users to pause motion at any time. If video content must include potentially problematic flashing, it should carry an appropriate Content Warning before the video begins. Ambient video, or decorative video with no audio, used as a design feature postdates the current WCAG guidelines, and as such is not specifically addressed by those guidelines. However, given what WCAG recommends for narrative videos or other animations, and taking into account that ambient video auto-plays upon page load, we recommend the following precautions: • Ambient video should not flash rapidly at any point. • Ambient video should be edited so that transitions are smooth and do not cause unintended flashing. This includes the transition from the end of the video back to its beginning, as ambient video typically loops. • If used as background, ambient video should be produced in accordance with Guideline 1.4. A moment of insufficient contrast between text and an ambient video background may be permissible, but in general, the same rules about contrast and legibility should apply. For information on video and audio recordings, see Guideline 1.2. External resources • More information on epileptic triggers
Search
