Trends and Projects in Digital Media (1402 CMST 4957980...

Running Header: CMST495: Trends and Projects in Digital Media 1

Trends and Projects in Digital Media (1402 CMST 4957980)

Degree Reflection

Shafqatullah Syed

University of MD U. College

Prof. Dr. Sheri Braxton-Lieber

20 April 2014

Trends and Projects in Digital Media 2

2

Abstract This paper is a reflection of the Digital Media and Web Technologies major offered at

University of MD University College (UMUC). The major offers three different tracks,

web development, motion graphics, and digital media. The paper attempts to familiarize

the audience of specific courses taken, why they comprehensively benefit career choices,

the positive impact professionally gained, and how they pave future development. It starts

with a progression from a young student to a professional then an adult student to a

seasoned professional. This progression is critical as it steers the reflection incorporating

real-world experience.


3


Degree Reflection My initial attempt at higher education was not completed and as a result I found

an opportunity to finish at UMUC. The Digital Media and Web Technologies major

complements my previous interdisciplinary approach to education. I was in search for an

online program that I can manage with the responsibilities of my lifestyle. It needed to

accept both the education I already gained from other schools and enhance my

professional footprint. The school not only had to offer up-to-date knowledge but the

quality of instructors teaching had to be equivalent to the peers of the professional

community. Ultimately, I found UMUC to have qualities in its diverse and practical

course offerings and the level of instructorship was recognizable in the field I was

interested in.

Courses Taken and Their Found Benefits

As a creative individual I began my educational journey with conceptual art

studio, mixed media, and design courses. As technology was beginning to infiltrate

schools I quickly picked up on it and experimented with digital design. My first job was

not technology related and I realized that I required a career change and took a job as a

web designer at a startup company. At this time I completed my two-year degree and

there was not a local four-year university offering the courses directly applying to the

web design profession. Fortunately, the local university was starting a new program that

took an interdisciplinary approach and I was able to create a Multimedia Technologies

major using the full gamut of courses offered. Finally, I was able to use experience


4

gained from real world experiences and invest them in courses with the insight gained.

Unfortunately, events did not allow me to graduate but I am hopeful in completion of my

undergraduate degree at UMUC.

Having most of the preliminary and foundation courses transferred I started at

UMUC taking Interaction Design (CMST290) and Introduction to Research (LIBS150)

which allowed me to loosen the rust from my joints. CMST 290 was an introduction to

design concepts and how they can manipulate the aesthetics and interactivity of users and

LIBS150 was a requirement for the university explaining the research process and using

tools form the library and online sources, ("Libs 150:," 2014). Now, I was more

comfortable with going school after a ten-year hiatus and my next semester I followed

with two interesting courses in Cultural Anthropology (ANTH 102) and Problem Solving

and Algorithm Design (CMIS 101). Never taking an anthropology course before it

allowed me to fine-tune my critical thinking skills by in-depth discussions, and

encouraging to dig as deeply as possible, to go beyond what is immediately apparent in

order to uncover the complexities of human experiences, (Ali, 2009). Problem solving

with Python programming language unearthed my avoidance of Object-Oriented

Programming (OOP) to remind me of its power and control over design. By this time in

my career I was exposed to web technologies and knew I was not interested in getting

intimately involved with OOP. I wanted to gain more current experience to build a

cohesive portfolio, which I was missing. The next two semesters I enrolled in

Fundamentals of Digital Media (CMST295), Principles of Web Design I and II

(CMST385/386), and Illustration Graphics (CMST320). UMUC says, “The digital media

and Web technology major is designed to help prepare students for a career in the field of


5

digital design,” ("Major in digital," 2014). In doing so, the four classes are in line with its

objective and after completion of the courses it confirmed one of my goals to garner

recent knowledge and build a consistent portfolio. The content covered in these four

courses introduced current technologies and design principles that enhance

personalization of information and continue to offer rich, multimedia content, (Brooks &

Gibson, 2012). Currently, I am taking Trends and Projects in Digital Media and Web

Design (CMST495) that will help compile the content created from previous courses,

external sources, and create a communications piece that will allow employers to gain

insight not found in the resume. Per UMUC advisors, I would need to take a few electives

to complete the degree requirements and plan to investigate Image Editing (CMST325)

and Advanced Image Editing (CMST425). In the pursuit of portfolio building and career

enhancing the tools, concepts, techniques, and the legal and ethic issues discussed in

these courses will renew my understanding in digital media.

Professional Preparation

Seasoned businesses owners and career advisors, Edie Golberg and Karen Stevens say,

“A well-structured career… can be delivered via technology…” and “…we can rely on

technology to fill the gap,” (Goldberg & Gibson, 2012). My career in digital media has

progressed through frontend web technologies, digital/print media, web/graphic design,

user interfaces, usability, and user experience. As a by-product I learned skills in

communication, problem solving, time management, conflict resolution,

hardware/software administration and usage. It behooves a person to make conscious

efforts to learn in the dynamic field of web technologies and other digital media

professions. Gaining this competitive advantage can be the difference in securing


6

employment and collecting Unemployment income. UMUC courses have solidified my

marketability and my continued passion for innovation by introducing me to tools,

concepts, principles, and techniques to keeping me knowledgeable with current

technologies and foundational principles/practices in design. They have taught me to be

confident with my work and communicate intelligently.

Conclusion and Future Study

Returning to school and choosing the proper path of study was always difficult

and would need to accommodate the responsibility of a large family at an older age. The

Digital Media and Web Technologies career path offered at UMUC compliments my

professional career, invests on experience, builds a portfolio, and fosters new learning. I

am very satisfied with the education received and hope to continue additional learning at

a graduate level. A career in teaching the knowledge I have collected to benefit those in

early stages of their technology careers may be the ultimate outcome. Seeking education

again has instilled in me to keep a forward developing progressing in my career.


7

References

Ashraf Ali, H. M. (2009). Anthropology and the Changing World: How Can

Anthropologists Serve Humanity?. Management Science & Engineering, 3(4), 16-

26.

Brooks, C., & Gibson, S. (2012). Professional Learning in a Digital Age. Canadian

Journal Of Learning And Technology, 38(2),

Goldberg, E. L., & Stevens, K. (2013). Leveraging Technology to Improve Satisfaction

with Career Management. Workforce Solutions Review, 4(6), 36-‐38.

Libs 150: introduction to research (1 credit). (2014). Retrieved from

http://www.umuc.edu/library/libresources/libs150.cfm

Major in digital media and web technology. (2014). Retrieved from

http://www.umuc.edu/academic-programs/bachelors-degrees/digital-media-and-

web-technology-major.cfm

Running Header: CMST495: Trends and Projects in Digital Media 1


Industry Analysis

Shafqatullah Syed

University of MD U. College

Prof. Dr. Sheri Braxton-Lieber

02 May 2014


2

Abstract This paper outlines my interests and career goals by discussing influences that shaped my

profession and touches on core technologies required to enter the web design/

development profession including: Hypertext markup language (HTML), Cascading

Style Sheets (CSS) jQuery, Asynchronous JavaScript and Extensible Markup Language

(AJAX), and JavaScript. It then briefly discusses the technologies available and used in

the profession and leaves open the opportunity to constantly learn in the dynamic field of

web design/ development. The paper closes by highlighting alternative career options

from the U.S. Bureau of Labor Statics (BLS) and a local design school. Overall the

research conducted in this paper presents careers in web design/ development are

dynamic and dependent on the development of technology.


3

Personal Field of Interest, Goals, and Development Unemployment has provided a retrospective of my professional career and

allowed an opportunity to prioritize my life once more. The prolonged period has effected

not only financial aspects of my life but also the family and emotional. I navigated to the

web design/ development profession not because of passion but with conscious efforts.

There was always a love of technology but it needed direction and with the advancement

of computers I found cohesiveness in the digital world. The interdisciplinary approach to

education has been advantageous in learning different disciplines that communicate

together. The real-time response I received from code and designs on the visual Web

became attractive. My career choices were affected by this newfound appreciation and

the professional experience gained would compliment my interdisciplinary approach.

Web design/ development always has the potential of innovation and present interesting

solutions for problems to world as it interacts with the Web. There are countless web

pages added, taken down, or replaced to the Web every. Some pages fail to communicate

properly, have a terrible user experience, and contain no meaning. My chosen profession

hopes to fill this void and provide value to innovation for future generations of the Web.

Perhaps I am missing the passion for my profession and I do not understand what

that is. Writer Dr. Milred Culp interviewed an employee at NBC news productions and he

advises, “...others to identify what aspect of work excites them and go after it,” and adds,

“Any path has obstacles, but once a path is chosen, the destination is clear,” (Culp, 2012).

In the immediate the need to get back into the workforce is critical but I am also

exploring areas in freelancing, consulting, business ownership, and teaching. Web design/

development has allowed me to learn from my peers, exercise skills in communication,


4

critical thinking, problem solving, and learn new technologies. I had very little direction

early in my career and teaching from personal experience in technology would allow

guidance for those in early web design/ development positions. The scope of my career

widened to include professions such as graphic design, interaction design, usability, print

design and other non-coding opportunities.

Professionals get a job, become proficient at it, and sometimes a promotion or

new job opportunity comes along, (Bopp, Bing & Forte-Trammell, 2010). “Career

development is more than just the job but about employees seeking their passions, finding

meaning in their work, planning the best way to develop themselves, and finding the right

learning activities to develop expertise,” (Bopp, Bing & Forte-Trammell, 2010). My

current situation facilitates depression, lack of motivation, weight gain, and clouds

judgment. Experience in web design/ development has unearthed my interest in

technology, innovation, and helping others. The expertise developed in this profession

instills the need to assist humanity in any form that manifests. “The importance of

planning and goal setting, in addition to anticipating life stress, is critical for coping with

change,”(Brown & Lent, 2005).

Current and Emerging Technologies

Technology is part of any society’s development and globalization process:

Individuals, governments, professionals, academia, and businesses use and access the

Web for various purposes. Professionally, I have been involved in content creation and

functionality in front-end Web technologies. At its core the framework is built around

Hypertext Markup Language (HTML) and the Web “…over 20 years has developed from

a Web of more-or-less static documents to, now, a platform for applications,” (HTML5


5

Leads, 2012). Ian Jacobs, an editor at W3C, says, “There are two driving forces behind

this evolution,” (HTML5 Leads, 2012). The first being the proliferation of various

devices and browsers and the second is the Web’s embracing of social networking model,

which, allows the ability to reach many customers. This interactivity can be achieved by

jQuery and AJAX which is are lightweight versions of JavaScript containing code

libraries and Extensible Markup Language (XML) code interfacing between the HTML,

(Györödi, Györödi, Pecherle, Lorand & Alin, 2009). HTML and Cascading Style Sheets

version 3 (CSS3) are used to apply and create responsive applications and gives web

projects the latest design and development advantages for mobile devices, (LaGrone,

2013). Initially web designers and developers assumed “…the goal of the web standards

movement was to remove needless complexity and absurdity from the process of creating

websites so we could focus our attention where it should be: on design, content, and

experience,” (Zeldman, 2014). With the added complexities of the Web front-end

developers and designers find it more difficult to get hired with just a solid understanding

of HTML, CSS, and JavaScript. John Urban, a Computer Science Graduate at UCLA and

freelance web designer, outlines ten skills a web designer should posses including:

1. Optimizing graphics

2. Practicing good User Interface/Experience

3. Constructing good navigation scheme

4. Using fonts wisely

5. Understanding color accessibility

6. Learn to write code (HTML/CSS)

7. Knowing basics of search engine optimization


6

8. Applying human computer interaction

9. Aware of browser quirks

10. Make designs flexible and maintainable

(Urban, 2009).

Accessibility to the Web is increasing and people use a multitude of methods to

view and use it. Web designers/ developers constantly need to be cognizant of new

technologies such as HTML5, CSS3, mobile development, and responsive technologies,

introduced and their alternative solutions. The career professional should possess core

scripting and design principles. The attention to specific technologies warranted by the

type of interactivity required and device use create competition.

Careers Available Working in the web field with the focus on web design/ development many

alternative digital design professions overlap. The Bureau of Labor Statistics (BLS)

publishes The Occupational Handbook (TOH), which is the U.S. governments premiere

source of career guidance. It associates fields in systems management, programming,

computer support, systems analysis, database administration, graphic design, information

security, multimedia animation, and software development with web development, (Web

developers, 2014). ("Art & design," 2014). The advisory board at Stevenson University

School of Design Visual Communication Design program consists of successful art and

design professionals, ("Faculty," 2014). They outline art and design career options for the

web design/ development to include: web programmer, content manager/ developer,

Flash developer, Information Architect, Interactive Artists, Multimedia Designer, Web

Producer, and E-Commerce Developer, (Art & Design, 2014). It is apparent from the


7

evidence that web design/ development have the potential of taking multiple career paths.

The student or adult learner can customize his/ her interests and build a passionate

profession.


8

References Art & design career options. (2014). Retrieved from http://designatsu.org/career/career-

options/

Brown, S. D., & Lent, R. W. (2005). Career Development and Counseling : Putting

Theory and Research to Work. Hoboken, N.J.: John Wiley.

Bopp, M., Bing, D., & Forte-Trammell, S. (2010). Agile career development: Lesson and

approaches from ibm. Boston, MA: Pearson Publishing, Inc.

Culp, M. L. (2012). Find the passion in your career and pursue it. Las Vegas Business

Press (10712186), 29(15), 19.

Faculty. (2014). Retrieved from http://designatsu.org/faculty/

Györödi, C., Györödi, R., Pecherle, G., Lorand, T., & Alin, R. (2009). Web 2.0

Technologies with jQuery and Ajax. Journal Of Computer Science & Control

Systems, 2(2), 11-15.

HTML5 Leads a Web Revolution. (2012). Communications of the ACM, 55(7), 16-17.

doi:10.1145/2209249.2209256

Urban, J. (2009, July 1). 10 things every web designer just starting out should know.

Retrieved from http://sixrevisions.com/web_design/10-things-every-web-

designer-just-starting-out-should-know/

LaGrone, B. (2013). Html5 and css3 responsive web design cookbook. Birmingham, UK:

Packt Publishing Ltd.

Web developers. (2014, January 8). Retrieved from http://www.bls.gov/ooh/arts-and-

design/graphic-designers.htm


9

Zeldman, J. (2014, January 6). It’s 2014. is web design dead?. Retrieved from

http://www.zeldman.com/2014/01/06/its-2014-is-web-design-dead/

Running head: CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL 1

CMST 495: Current Trends and Projects In Digital Media and Web Technologies:

Storyboard Project for Syed Designs Portfolio Website

Shafqatullah Syed

University of Maryland University College

Prof. Dr. Sherri | Summer 2014

CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL 2

Abstract

This paper details assets, layout, structure, and has a storyboard for a rudimentary look

and feel of Syed Designs portfolio website. It begins with a list of the assets to be

included and then a draft storyboard of the portfolio website which, will aim to create a

cohesive presentation. The main purpose of the portfolio website is to garner accurate

communication between the dsigner, Shafqatullah Syed, and prospective employers. The

15 plus years of design and technical experience. Foundational design principles

including C.A.R.P (Contrast, Repetition, Alignment, Proximity) and Gesalt Principles

(Similarity, Continuation, Closure, Proximity) will be adhered to as they translate from

print to web. It will use a responsive single page layout that scrolls from top down.

Essentially, there will be at least five sections including a homepage but the navigation

will have at three targeting links titles, About, Portfolio, and Contact. The first section

will allow downloadable documents to learn about the artist and will cover previous jobs

the portfolio will have examples including logo, infographic, website, web/mobile and

digital design. An area for testimonials, contact form, and footer links follows this

section. The draft storyboard may later be edited to accommodate additional content.

Finally, it will be coded CSS3 and HTML5 to target recent browsers for the computer

and mobile environments. All code will pass W3C validation.

CMST 495: CURRENT TRENDS AND PROJECTS IN DIGITAL

3

CMST 495: Current Trends and Projects In Digital Media and Web Technologies:

Storyboard Project for Syed Designs Portfolio Website

The proliferation of the Internet and technology has made the web portfolio very

popular. Research on how to get the portfolio to be advantageous by communicating the

right meanings to prospective employers, clients, and academia is essential. It can be the

difference to securing a new job, generating revenue, and getting into the right schools. In

his book, “Web Bloopers: 60 Common Web Design Mistake and How To Avoid Them,”

the author says, “…the Web is sorely lacking in usability,” (Johnson, 2003). As designers

one has to understand if a visitor cannot use his/her portfolio website with ease, it

highlights bad communication and has the absence of professionalism. Some designers

focus on color and design and relax on the real purpose of the portfolio with is getting the

intended communication efficiently to the visitors. In a more recent publication more

mistakes are highlighted including: creating a splash page, background music, missing

navigation, expensive/flashy design, hit counters, no SEO (Search Engine Optimization),

using stock content, missing basic information, and a call to action, (King, 2010). Syed

Designs presents a portfolio website that will attempt to solve the many problem in

portfolio web design that plague some designers.

Assets by portfolio section

Homepage

Logo, background image, and link to the portfolio.


4

About

PDF links to important documents including: cover letter, resume,

recommendation letters, awards, writing samples, teaching statement artist statement, and

legacy portfolio

Past roles

Logos, links for previous employers, and a background graphic.

Portfolio

Three logo print designs, infographic, three website examples, three mobile/

website examples, one wireframe/mockup, one or two digital art. This list may get

expanded depending on the assets available and this section will also accommodate any

new replacement examples. Items will grouped by like examples such as logo, print,

infographic, mobile/ website, wireframes/mockups, and digital art. This area

compliments the top down scrolling by displaying each item underneath one another.

Testimonials

Quotations from professionals validating work performed, testifying character,

and a background graphic.

Contact

Contains a simple a form with JavaScript validation and some text.

Footer

More related links and a background graphic.


5

Storyboard

Notes

The storyboards follow a linear layout. The portfolio website is

responsive as it will resize with the browser window and still be usable

on smaller mobile screens. In addition resizable elements it also utilizes

white space, large type, grid layout, alternative text, and high contrasting

colors where possible for to optimize for accessibility. The call to action

statement targets directly to the portfolio.


6

Both of these areas are easily updated. The artist can make sure any

referenced documents are up-to-date for prospective employers,

recruiters and to reference personally. A legacy portfolio of all prior

work is made available and in the future the current online portfolio

will be here as a HTML5/PDF flipbook.

These two

sections work

together to

provide insight

on the artist.

These sections

work together to

provide insight

on the designer.


7

The portfolio section

illustrates experience,

expertise, and skills. Each

piece is accompanied by a

short statement or

paragraph that provides

explanation as to the

purpose, use, and

audience.

The vertical scroll

portfolio makes it

efficient for both scanners

and the ones that want to

see the all the details. All

the examples scale to fit

the viewpoint/ browser

window.


8

Conclusion

Web design portfolios can be plagued with bad design and fail to communicate

accurately and the misuse of design principles are at the core of their downfall. Syed

Designs hopes to be the answer to the misdirected portfolios. Following century old

design principles, using sound web skills, paying attention to user experience, and basic

professionalism will attempt to prefect but it will always be a work in progress.

Toward the bottom

visitors can read

actual quotes form

reputable

professionals. This

is an attempt to

solidify authority.

Finally, the

contact form is

available for

direct

communication

with the designer.


9

References

Johnson, J. (2003). Web bloopers: 60 common web design mistakes and how to avoid

them. Amsterdam, Holland: Morgan Kaufmann Publishers.

King, C. (2010). Top 10 website mistakes. Vital, 7(2), 25. doi:10.1038/vital1135

Shafqatullah Syed RE: Student and Exchange Visitor Program (SEVP) Audience: Designers and developers of the SEVP website and future branded system software Purpose: A system-wide style guide and resource for all SEVP products to have consistency, meaning, usability, accessibility. This guide complies existing Department of Homeland Security styles and can be used for all its affiliated agencies.

SEVP SYSTEM STYLE GUIDE

This guide is a resource for SEVP systems to produce effective and

visually-consistent products that are easy for consumers to access,

use, and understand.

U.S. Immigration

and Customs

Enforcement (ICE),

Student and

Exchange Visitor

Program (SEVP)

SEVP SYSTEM Style Guide

1

Table of Contents

1 INTRODUCTION .................................................................................................................................... 7

2 HOW TO USE THIS GUIDE ..................................................................................................................... 7

3 FRONT-END GOALS .............................................................................................................................. 8

3.1 Accessibility .................................................................................................................................. 8

3.2 Responsive web design (RWD) ..................................................................................................... 8

3.3 Graceful degradation ................................................................................................................... 9

3.4 Progressive enhancement ........................................................................................................... 9

4 BUILD OR IMPLEMENT UI FRAMEWORK............................................................................................... 9

4.1 U.S. Web Design Standards ................................................................................................ 11

5 STYLE .................................................................................................................................................. 11

5.1 Branding ..................................................................................................................................... 11

5.1.1 Header .................................................................................................................................... 11

5.1.2 Footer...................................................................................................................................... 12

5.2 Color ........................................................................................................................................... 12

5.2.1 Verify Color and Contrast ....................................................................................................... 12

5.2.2 Palette ....................................................................................................................... 13

5.2.3 Primary Colors ........................................................................................................................ 13

5.2.4 Secondary Colors ............................................................................................................... 14

5.2.5 Background Colors ............................................................................................................. 14

5.2.6 Tertiary Colors .................................................................................................................... 15

5.2.7 Special State Colors ............................................................................................................... 15

5.3 Typography ....................................................................................................................... 16

5.3.1 Content Hierarchy .................................................................................................................. 16

5.4 Links .................................................................................................................................. 20

5.4.1 Usability .................................................................................................................................. 20

https://playbook.cio.gov/designstandards/

https://playbook.cio.gov/designstandards/visual-style/#colors

https://playbook.cio.gov/designstandards/visual-style/#typography

https://playbook.cio.gov/designstandards/visual-style/#links


2

5.4.2 Accessibility ........................................................................................................................ 21

5.5 Lists ................................................................................................................................... 21

5.5.1 Usability .................................................................................................................................. 22

5.6 Grid System ....................................................................................................................... 22

5.6.1 The Benefits ............................................................................................................................ 22

5.6.2 Accessibility ........................................................................................................................ 23

5.6.3 Usability .................................................................................................................................. 23

5.6.4 Guidance ............................................................................................................................. 23

5.7 Images and Icons........................................................................................................................ 23

5.7.1 Images .................................................................................................................................... 23

5.7.2 Image Sprites or Web Icon Fonts ........................................................................................... 24

5.7.3 Image Maps ................................................................................................................... 25

6 COMPONENTS .................................................................................................................................... 26

6.1 Form Controls ................................................................................................................... 26

6.1.1 Form Layout ........................................................................................................................... 26

6.1.2 Label Position ..................................................................................................................... 26

6.1.3 Text Input ...................................................................................................................... 26

6.1.4 Dropdown ................................................................................................................. 28

6.1.5 Checkboxes ................................................................................................................... 30

6.1.6 Radio Buttons ........................................................................................................... 31

6.1.7 Fieldset ......................................................................................................................... 32

6.1.8 Date and Phone Number Input ............................................................................... 33

6.1.9 Required and Optional Fields ............................................................................................ 34

6.1.10 Focus Behaviors ................................................................................................................. 36

6.1.11 Tooltip Behaviors ............................................................................................................... 36

https://playbook.cio.gov/designstandards/visual-style/#lists

https://playbook.cio.gov/designstandards/grids/

http://www.w3.org/WAI/tutorials/images/imagemap/

https://playbook.cio.gov/designstandards/form-controls/

https://playbook.cio.gov/designstandards/form-controls/#text-inputs

https://playbook.cio.gov/designstandards/form-controls/#dropdown

https://playbook.cio.gov/designstandards/form-controls/#checkboxes

https://playbook.cio.gov/designstandards/form-controls/#radiobuttons

http://webaim.org/techniques/forms/controls#checkbox

https://playbook.cio.gov/designstandards/form-controls/#date-input


3

6.1.12 Form Control Instructions .................................................................................................. 37

6.1.13 Placeholder Text ................................................................................................................ 38

6.2 Alerts ................................................................................................................................. 39

6.2.1 Feedback ............................................................................................................................ 39

6.3 Tables ................................................................................................................................ 40

6.3.1 Accessibility ............................................................................................................................ 40

6.3.2 Usability .............................................................................................................................. 41

6.4 Buttons .............................................................................................................................. 41

6.4.1 Primary Buttons ................................................................................................................. 42

6.4.2 Secondary Buttons ............................................................................................................. 42

6.4.3 Button Focus ...................................................................................................................... 42

6.4.4 Disabled and Big Buttons ................................................................................................... 43

6.4.5 Button Labels ..................................................................................................................... 44

6.4.6 Button Iconography ........................................................................................................... 44

6.5 Progress Control ............................................................................................................... 44

6.5.1 Activity Indicators................................................................................................................... 45

6.5.2 Usability .............................................................................................................................. 45

6.6 Breadcrumbs ..................................................................................................................... 46

7 Search Bar ................................................................................................................................. 47

7.1 Accessibility ................................................................................................................................ 47

7.2 Usability ...................................................................................................................................... 47

8 Accordions ................................................................................................................................ 48

8.1 Accessibility ................................................................................................................................ 49

8.2 Usability ...................................................................................................................................... 49

9 NAVIGATION ........................................................................................................................................ 50

9.1 Accessibility ................................................................................................................................ 51

https://playbook.cio.gov/designstandards/alerts/

https://playbook.cio.gov/designstandards/tables/

https://playbook.cio.gov/designstandards/buttons/

http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp

http://www.w3.org/WAI/tutorials/menus/multiple-ways/

https://playbook.cio.gov/designstandards/search-bar/

https://playbook.cio.gov/designstandards/accordions/


4

9.2 Usability ...................................................................................................................................... 51

10 SIDEBAR/ LOCAL NAVIGATION .................................................................................................. 51

10.1 Accessibility ................................................................................................................................ 51

10.2 Usability ...................................................................................................................................... 51

11 SECTION 508 COMPLIANCE ...................................................................................................... 52

11.1 Syntax validation........................................................................................................................ 53

11.2 Semantic validation ................................................................................................................... 53

11.3 Alternate Text - Checkpoint (a) .................................................................................................. 53

11.4 Multimedia Equivalents - Checkpoint (b) .................................................................................. 54

11.5 Color - Checkpoint (c)................................................................................................................. 54

11.6 CSS Style Sheets and Headings - Checkpoint (d) ...................................................................... 54

11.7 Server-Side Image Maps - Checkpoint (e) ................................................................................. 54

11.8 Client-Side Image Maps - Checkpoint (f) ................................................................................... 55

11.9 Simple Tables - Checkpoint (g) .................................................................................................. 55

11.10 Complex Tables - Checkpoint (h) ........................................................................................... 55

11.11 Frames - Checkpoint (i) .......................................................................................................... 55

11.12 Screen Flickering - Checkpoint (j) .......................................................................................... 56

11.13 Provide Text Only Pages as a Last Resort - Checkpoint (k) .................................................. 56

11.14 Scripts - Checkpoint (l) ........................................................................................................... 56

11.15 Provide Links to Necessary Plug-Ins - Checkpoint (m) ......................................................... 56

11.16 Forms - Checkpoint (n) ........................................................................................................... 57

11.17 Skip Repetitive Navigation Links - Checkpoint (o) ................................................................ 57

11.18 Timed Responses - Checkpoint (p) ........................................................................................ 57

12 ASSISTIVE TECHNOLOGY ................................................................................................................... 58

12.1 Page Structure ............................................................................................................................ 59

12.2 Navigation and Keyboard Access .............................................................................................. 59

12.3 Focus ........................................................................................................................................... 59

12.4 Rich Internet and Mobile Content ............................................................................................. 59

13 REFERENCES....................................................................................................................................... 60

https://playbook.cio.gov/designstandards/sidenav/

http://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards#subpart_b


5


6

Table of Figures

Figure 1 Web Application Footer ................................................................................................. 12

Figure 2: Heading Hierarchy ........................................................................................................ 17

Figure 3: Input Text Fields ............................................................................................................ 27

Figure 4: Dropdown Menu ............................................................................................................ 28

Figure 5: Checkbox States (selected, deselected, normal, disabled) ........................................ 30

Figure 6: Radio Button States (selected, deselected normal, disabled) ................................... 31

Figure 7: Checkboxes in a Fieldset............................................................................................... 33

Figure 8: Radio Buttons in a Fieldset ........................................................................................... 33

Figure 9: Day of Birth Using Three Textboxes ............................................................................. 34

Figure 10: Domestic and International Textboxes ...................................................................... 34

Figure 11: Required Field Text ..................................................................................................... 35

Figure 12: Required Field Asterisk ............................................................................................... 35

Figure 13: Optional Field Text ...................................................................................................... 35

Figure 14: Field with Focus .......................................................... Error! Bookmark not defined.

Figure 15: Field Without Focus .................................................... Error! Bookmark not defined.

Figure 16: Focused Field with Tooltip ......................................................................................... 37

Figure 17: Linked Set of Instructions ........................................................................................... 38

Figure 18: Labels with Placeholder Text ..................................................................................... 38

Figure 19: Alerts for Success, Warning, Error, Information ........................................................ 39

Figure 20: Bordered Table............................................................................................................ 40

Figure 21: Borderless Table ......................................................................................................... 40

Figure 22: Primary Buttons .......................................................................................................... 42

Figure 23: Secondary Buttons...................................................................................................... 42

Figure 24: Button Having Focus ................................................................................................... 42

Figure 25: Disabled Button .......................................................................................................... 43

Figure 26: Big Button .................................................................................................................... 43

Figure 27: Buttons with Action Icons ........................................................................................... 44

Figure 28: Determinate Progress Bars ......................................................................................... 45

Figure 29: Indeterminate Progress Bar ....................................................................................... 45

Figure 30: Loading Icon ................................................................ Error! Bookmark not defined.

Figure 31: Simple Breadcrumb Trail ............................................................................................ 47

Figure 32: Large, Medium, and Small Search Bars ..................................................................... 47


7

Figure 33: Accordion Content ...................................................................................................... 49

Figure 34: Global Navigation ....................................................................................................... 50

Figure 35: Sidebar Navigation ..................................................................................................... 52

1 INTRODUCTION

The Student Exchange and Visitor Program (SEVP ) strives to better serve its users by

implementing products that provide effective access to information that help its users make

informed decisions to carry out the SEVP mission.

This Style Guide is a resource for SEVP to produce effective and visually-consistent products

that are easy for users to access, practice, and understand. This guide includes design

principles, guidelines for front-end development, and visual identity standards for common

user interface elements. The guide is a living document and will continue to evolve for SEVP

and the users of its products

2 HOW TO USE THIS GUIDE

This document is organized such that the universal elements, i.e., the most used design

elements, are presented up front. Where applicable each design element is accompanied

with supporting explanation to include all or any: accessibility, usability, references, and

external links to source documents.

This guide provides a picture of the design element from a design point of view. This figure is

a design artifact that gives the front-end developers a target to implement in HTML and CSS.

The majority of figures included in this document are surrounded by a fine lined box; this box

should not be implemented in SEVP.

All Accessibility information is provided from U.S. Web Design Standards, established Section

508 methods, and other industry led best practices.

Throughout the remaining sections of this Style Guide this icon is used to provide a direct

link to source content, most commonly from the U.S. Wed Design Standards Framework.

Additionally, Citations are provided as appropriate and fully attributed at the end of this

document.


8

3 FRONT-END GOALS

3.1 Accessibility

Accessibility is one of the most important aspects of modern web development. Accessibility

means the greatest number of users can access and interact with the content of the product.

Users of all types will have a better experience if accessibility is designed and built in the

product. And least of all, it is required by law for all federal Electronic and Information

Technology (EIT) products.

The implementation of accessibility features is most effective when incorporated into agile

development processes. It is difficult and adds risk when accessibility features are developed

at the end of a project. However, if taken into account throughout, it is straight forward and

cost effective. The best and perhaps only way to ensure this is done is training and education.

Every member of a software development project should be aware of what accessibility

requirements are and a basic understanding of how they are implemented.

Accessible Rich Internet Applications (ARIA) define a way to make web content and web

applications more accessible to people with disabilities. It helps with dynamic content and

advanced user interface controls developed with Hypertext Markup Language (HTML) in

combination with JavaScript and related technologies.

This style guide provides best practices and standards to give project teams the tools they

need to create websites and web applications that are accessible to all users, regardless of

browser, device or disability. The guidelines provide conformance with Section 508

requirements.

3.2 Responsive web design (RWD)

RWD is an approach and methodology for cross-platform compatibility. Its purpose is to

allow the same web page to render a specific view depending on the device’s viewport. It is

an approach to web design aimed at crafting sites to provide an optimal viewing and

interaction experience—easy reading and navigation with a minimum of resizing, panning,

and scrolling—across a wide range of devices (from desktop computer monitors to mobile

phones). RWD allows the code to be device agnostic and adaptable to future generations of

devices.


9

3.3 Graceful degradation

Graceful degradation is the practice of building web functionality so that it provides a certain

level of user experience in more modern browsers, but it will also degrade gracefully to a

lower level of user experience in older browsers. This lower level is not as nice to use for

users, but it does provide them with the basic functionality.

3.4 Progressive enhancement

Progressive enhancement provides an accessible alternative to HTML content served by the

user interface (UI). It should be seen as an alternative to graceful degradation, where older

browsers with less features simply omit content that they are unable to render. With

progressive enhancement, a basic presentable view of the content is always available, and

then any additions that may not be fully supported for all end users are added to it.

4 BUILD OR IMPLEMENT UI FRAMEWORK

Creating a UI framework that is flexible, follows latest standards, thoroughly tested takes a

lot of work and could become a project in itself. With the rise of mobile devices making

responsive websites and keeping up with the latest technologies is time consuming.

Designers and developers need a solid foundation that provides everything a typical web

application would require but is flexible enough for customization. There are dozens of open-

source UI Frameworks to choose from.

Weather creating or implementing an existing one, the following components should be

present in a UI framework compliant with Section 508.

Grid System

Color palette

Form Controls

Typography

Tables

Buttons

Icons

Additionally, it should have an extensive list of components and/or design patterns, as the

ones listed below:


10

Dropdowns

Button Groups

Navigation Bar

Breadcrumbs

Labels & Badges

Alerts

Progress Bar

Considerations on choosing a UI framework

License

Before development starts with a framework; investigate licensing requirements from the

distributor. Ideally the framework should be open-source. An open-source license is a type of

license for computer software and other products that allows the source code, blueprint or

design to be used, modified and/or shared under defined terms and conditions. This allows

end users to review and modify the source code, blueprint or design for their own

customization, curiosity or troubleshooting needs.

Design Patterns

The framework should provide foundation of the most common design patterns, navigation,

pagination, form validation, tables, form controls, the more the better.

Learning Curve

Choose one that has the smallest possible learning curve, considering your team’s expertise

in User Interface and Front-end Development.

Documentation

Look for a framework which has thorough documentation with plenty of examples, snippets,

sample code, articles and tutorials.

Community

The communities behind a framework make or break the framework. Choose a framework

which has a friendly community which helps developers new to the platform.

Bug Fixes/ Updates

Choose a framework which is updated often, is open about the bugs it finds, and more

importantly fixes the bugs people come across as soon as possible.


11

Mobile First

Choose a framework that provides a fluid resizing grid which, arguably offers the most

compelling mobile first story.

Popularity

Bigger popularity means more people involved in the project, and thus increasing tutorials

and articles from the community, real-world examples/websites, third-party extensions, and

better integration with relative web development products. Great popularity also means that

the framework is future-proof – a framework with a bigger community around it is much less

likely to be abandoned.

4.1 U.S. Web Design Standards

Built and maintained by U.S. Digital Service and 18F designers and developers, the U.S. Web

Design Standards follows industry-standard web accessibility guidelines. It reuses the best

practices of existing style libraries and modern web design. It provides a guide for creating

beautiful and easy-to-use online experiences for the users of U.S. Government websites and

web applications.

The U.S. Web Design Standards should be put into consideration for any new development of

government websites and or applications, (Community 1. , U.S. Web Design Standards, 2015).

5 STYLE

5.1 Branding

5.1.1 Header

Each layout must have a well-defined header and footer. The primary purpose of your header

is to promote the agency's/ department's brand and make it instantly recognizable to the

audience. An effective header should instantly communicate to its audience if they have

arrived at the correct place. The header is the most valuable space on the screen. Or, in

designer’s terms – it is the most expensive piece of screen real estate. The header should

always be used wisely, keeping in mind the goals and vision of the web application.

Keep it small: make sure the header does not take up too much space.

Keep as much screen space available as possible for other content.

Keep it consistent: make sure the look and feel and functionality do not change

throughout the application.

https://www.whitehouse.gov/digital/united-states-digital-service

https://18f.gsa.gov/





12

SKeep the header relevant: do not put in irrelevant images or content that does not

convey what the web application of the agency/ department does.

Figure 1: Web Application Header

5.1.2 Footer

Footers serve site visitors who arrive at the bottom of a page without finding what they want.

Figure 1 Web Application Footer

5.2 Color

5.2.1 Verify Color and Contrast

The Web Content Accessibility Guidelines (WCAG) says content should be distinguishable and

require designers/developers make it easier for users to see and hear content including

separating foreground from background. WCAG 2.0 level AA requires a contrast ratio of 4.5:1

for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger). Level

AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.

Conforming to a standard means the web application meets or satisfies the 'requirements' of

the standard. In WCAG 2.0 the 'requirements' are the success criteria. To conform to WCAG 2.0

requirements about color contrast, the web application needs to satisfy the success criteria,

that is, there is no content which violates the success criteria.

Conformance level AA: Contrast 4.5:1 or 3:1 for big text (18pt/14pt bold).

If links are not underlined, there must be 3:1 contrast between link text and body text

and all text must still meet other contrast requirements. There also must be an

http://www.w3.org/WAI/intro/wcag

http://www.w3.org/TR/WCAG20/




13

additional change (e.g., underlining) when it is hovered over or receives keyboard

focus.

Ensure color is not used as the sole method of conveying content or distinguishing

visual elements.

Print on a grayscale printer to test contrast and color.

(Community W. , 2015)

5.2.2 Palette

This palette is designed to support a range of distinct visual styles that continue to feel

connected. The intent of the palette is to convey a warm and open American spirit, with

bright saturated tints of blue and red, grounded in sophisticated deeper shades of cool blues

and grays. These colors — combined with clear hierarchy, good information design, and

ample white space — should leave users feeling welcomed and in good hands.

This is a simple, minimalist color palette. Shades of blue dominate, providing a neutral

backdrop on which brighter shades, clean type treatment, and bright white content areas

"pop" on the page, (Community 1. , Visual Style, 2015).

5.2.3 Primary Colors

This palette’s primary colors are blue, gray, and white. Blue is commonly associated with

trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

#0071bc

primary

#205493

primary-darker

#112e51

primary-darkest

#212121

base



14

#323a45

gray-dark

#aeb0b5

gray-light

#ffffff

white

5.2.4 Secondary Colors

These are accent colors to provide additional lightness and style to pages looking for a more

modern flair. These colors should be used to highlight important features on a page, such as

buttons, or for visual style elements, such as illustrations. They should be used sparingly and

never draw the eye to more than one piece of information at a time.

#02bfe7

primary-alt

#046b99

primary-alt-

darkest

#00a6d2

primary-alt-

dark

#9bdaf1

primary-alt-

light

#e1f3f8

primary-alt-

lightest

#e31c3d

secondary

#981b1e

secondary-

darkest

#cd2026

secondary-dark

#e59393

secondary-light

#f9dede

secondary-

lightest

5.2.5 Background Colors

#323a45

gray-dark

#5b616b

gray

#aeb0b5

gray-light

#d6d7d9

gray-lighter

#f1f1f1

gray-lightest

#494440

gray-warm-dark

#e4e2e0

gray-warm-light


15

These colors are used largely for background blocks and large content areas. When

alternating between tones, be sure to use enough contrast between adjacent colors.

5.2.6 Tertiary Colors

These colors are used primarily for content-specific needs, such as alerts and illustrations.

They should never overpower the primary colors.

#fdb81e

gold

#f9c642

gold-light

#fad980

gold-lighter

#fff1d2

gold-lightest

#2e8540

green

#4aa564

green-light

#94bfa2

green-lighter

#e7f4e4

green-lighter

#205493

cool-blue

#4773aa

cool-blue-light

#8ba6ca

cool-blue-lighter

#dce4ef

cool-blue-lightest

5.2.7 Special State Colors

#3e94cf

focus

#4c2c92

visited

#112e51

primary-darkest

#dce4ef

gray-cool-light


16

5.3 Typography

U.S. government websites have common typographic needs: clear and consistent headings,

highly legible body paragraphs, clear labels, and easy-to-use input fields. Designed by Paul D.

Hunt, Source Sans Pro is the ultimate corporate-style sans-serif web font.

The font itself is not the most exciting one on this list, but it is probably the most professional.

It works in pretty much every situation and it keeps legibility with every size, (Bacic, 2014). It

is designed for legibility and can beautifully adapt to a variety of visual styles, (Community 1.

, Visual Style, 2015). Readable text allows users to efficiently read and take in textual

information, whereas text that is not readable turns off readers or makes it challenging for

them to stay focused. The following guidelines promote good readability.

5.3.1 Content Hierarchy

These principles are not all there is to know about content hierarchy in web design, but

understanding these simple related concepts and applying them to your web application can

make for far more satisfying and effective UI.

https://github.com/adobe-fonts/source-sans-pro

https://playbook.cio.gov/designstandards/visual-style/#typography


17

5.3.1.1 HTML Headings

Figure 2: Heading Hierarchy

Size

The size can relate to both the size of the individual pieces of the content as well as other

design elements, such as imagery, and how these play off against each other. For example,

use size to draw attention to main headings. Ensure that they are larger than the main

content shows that they have a different level of importance and are something that the user

needs to pay attention to.

Size is also good for breaking up the content on a page into smaller chunks and emphasizing

small parts of content that are important. Use size to take the emphasis away from certain

elements or bits of content that want to be less noticeable or aren’t as important as the rest.

Font Weights & Font Styles

Use font weights and styles to add more subtle emphasis to parts of the content. Using font

weights that are heavier than the rest of the or in a different font style (such as italic) can be


18

great for adding emphasis to little bits of content that might want to pull out and give a bit

more recognition, without overpowering the rest of the design.

Color

Varying color is another effective way to divide and display the content of the web

application. Use it to subtly add focus to areas of the design, either by blocking off areas of

content or using it within your content to add emphasis to text that might require it.

Position & Alignment

How position the content has a big impact on how it’s perceived by users. Ensuring to work

with a grid system and align the content well is very important because creates order in your

design.

Proximity & Whitespace

Looking at how close or far apart elements in the design are spaced is essential to building a

visual content hierarchy that has impact and makes sense. If elements which are related are

too far apart, it will break the flow for the user when they’re reading the page. However, the

same can be said for elements that are spaced far too close together. Things which are too

cramped are going to be difficult to understand in terms of what has the most importance or

should have the most emphasis.

5.3.1.2 Usability

Alignment

Flush left type provides the eye a constant starting point for each line, making text easier to

read, (Community 1. , U.S. Web Design Standards, 2015).

Line length Controlling the length of lines of text in extended copy makes reading more comfortable by

helping readers’ eyes flow easily from one line to the next. Somewhere between 50 and 75

characters per line is broadly considered to be a readable line length, while 66 characters is

considered the ideal, (Community 1. , U.S. Web Design Standards, 2015).

Spacing

White space affects how the user focuses their attention on the content. It makes it easier to

know what to read and where to begin. Spacing between typographic elements should be


19

open enough to feel light, but close enough to establish a proper relationship between

elements, (Community 1. , U.S. Web Design Standards, 2015).

Line Height

Line height is a very common term meaning the space between individual lines of text. Line

height is another factor in the readability of body text and even headers. Sufficient line height

is especially important in Web design because it makes the text ultimately more scannable.

Letter Spacing

Similar to line height, letter spacing affects readability in Web typography. Letter spacing is,

as the name suggests, the space between each letter in words, letter spacing is an obvious

factor in legibility.

Line Length

Line length is often overlooked in Web typography but should not be. Line length is, of

course, the number of characters per line. A good line length is one that allows the reader’s

eyes to flow from the end of one line to the beginning of the next very easily and naturally.

Contrast

Contrast is the core factor in whether or not text is easy to read. Good contrasts will make

text easy on the eyes, easy to scan quickly and overall more readable.

For accessibility refer to Verify Color and Contrast section.

5.3.1.3 Typeface

Typeface in a web application is defined by the font-family property in CSS, it is

recommended to let this property hold several font names as a "fallback" system, to ensure

maximum compatibility between browsers/operating systems. If the browser does not

support the first font, it tries the next font.

Start with the font the application uses as default, and end with a generic family, to let the

browser pick a similar font in the generic family, if no other fonts are available. E.g.

Font-family: "Source Sans Pro", sans-serif;

UI frameworks provide ways to easily change typeface at global scale.


20

5.3.1.4 Recommended Generic Font Family

Sans-serif is the recommended generic font family. Sans-serif fonts do not have decorative

markings, or serifs, on their letters. These fonts are often considered easier to read on

screens.

5.3.1.5 Web-safe fonts

When possible it is recommended to use web-safe fonts. This fonts likely to be present on a

wide range of computer systems, and used by Web content authors to increase the likelihood

that content displays in their chosen font.

5.4 Links

Hypertext links are one of the most basic elements of HTML. As such, making hypertext links

accessible is one of the most basic and most important aspects of web accessibility. Standard

hypertext links work with all technologies, platforms, and users of all abilities can access

them, whether directly or through the use of some sort of assistive technology. Because links

are so basic to the functionality of web content, inaccessible links are one of the most severe

barriers to overall accessibility.

Figure 4: Linked text

5.4.1 Usability

Don’t use the word “link” in your links.

Don’t capitalize links: There are two problems with capitalized text in links.

First, some screen readers read capitalized text letter-by-letter. The second problem is

that capital letters are harder to read (for everyone, but especially people with reading

disabilities).

Keep link text concise.

https://playbook.cio.gov/designstandards/visual-style/#links


21

Alert the user when opening new windows.

Design with keyboard-only users in mind.

Make the style of your links consistent.

Ensure that the color of the link text contrasts sufficiently with the background color.

Links are underlined and/or are a different color value (lighter or darker) than the

main text.

5.4.2 Accessibility

Users must be able to navigate to and select each link using the keyboard alone. In most

browsers, the Tab key allows users to jump from link to link, and the Enter key allows users

to select a link. If the only way to access a link is with a mouse, the link is unusable by people

who cannot use a mouse.

5.5 Lists

Lists organize written information for users. To-do lists determine what to get done.

Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of

ingredients and lists of instructions. With a list for nearly everything, it’s easy to understand

why they are also popular.

HTML provides three different types of lists to choose from: unordered, ordered, and

description lists. Choosing which type of list to use—or whether to use a list at all—comes

down to the content and the most semantically appropriate option for displaying that

content.

There are multiple ways to style these lists with CSS. For example, we can choose what type

of marker to use on a list. The marker could be square, round, numeric, alphabetical, or

perhaps nonexistent. Also, we can decide if a list should be displayed vertically or

horizontally. All of these choices play significant roles in the styling of web pages.

Figure 5: Unordered List

Figure 6: Ordered List

Figure 7: Definition List

https://playbook.cio.gov/designstandards/visual-style/#lists


22

5.5.1 Usability

When to use

Use an ordered list when to display text in some ranking, hierarchy, or series of steps.

Use unordered lists to display text in no specific order.

Use a definition list to outline multiple terms and their descriptions, as in a glossary.

When to consider something different

If there is a need to communicate long lists of narrative text.

Guidelines

Use sentence case and begin lists with a capital letter.

Use punctuation appropriate to the text. Do not leave sentences without periods.

5.6 Grid System

Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming

considered best practice for rapid layout scaffolding. As a result, there has been no shortage

of frameworks popping up offering their own grid systems trying to garner favor.

In basic terms, a grid system is a structure that allows for content to be stacked both

vertically and horizontally in a consistent and easily manageable fashion. Additionally, grid

system code is project-agnostic giving it a high degree of portability so that it may be

adopted on new projects.

5.6.1 The Benefits

They increase productivity by providing simple and predictable layout scaffolding to HTML

design. The structure of a page can be formulated quickly without second guessing its

precision or cross-browser compatibility.

They are versatile in how layouts can be constructed, being adaptable in varying

combinations of rows and columns. They even support nested grids for more complex use

cases. No matter the layout requirements, a grid system is almost certainly well suited.

They are ideal for responsive layouts. This is where grid systems reign supreme. They make it

incredibly easy to create mobile friendly interfaces that are adaptable to different sized

viewports.



23

5.6.2 Accessibility

Low-vision users should be able to increase the size of the text by up to 200 percent

without breaking the layout.

5.6.3 Usability

When to use

Almost always use a grid layout — visitors can read more quickly on pages that use

grids. Choose a single grid system for your entire site.

When to consider something else

Avoid mixing different grid systems.

5.6.4 Guidance

It is recommended to choose a 12-column grid with flexible column widths and fixed

gutters. The width of the padding on the left and right edge of the grid depends on

device size.

Avoid text lines longer than 75 characters. Place text in narrower grid boxes to keep

text lines from becoming too wide.

18f (Community 1. , Grids, 2015)

5.7 Images and Icons

Icons are most effective when they improve visual interest and grab the user's attention. They

help guide users while they're navigating or interacting with the application. The primary

attribute for icons is being a common visual language which effectively bridges language

gaps. They should be instantaneously recognizable and remove open interpretation.

5.7.1 Images

Adding alternative text for images is the first principle of web accessibility. It is also one of the

most difficult to properly implement. The web is replete with images that have missing,

incorrect, or poor alternative text. Like many things in web accessibility, determining

appropriate, equivalent, alternative text is often a matter of personal interpretation.

Alternative text provides a textual alternative to non-text content in web pages.


24

5.7.1.1 Accessibility

Alternative text serves several functions:

It is read by screen readers in place of images allowing the content and function of the

image to be accessible to those with visual or certain cognitive disabilities.

It is displayed in place of the image in browsers if the image file is not loaded or when

the user has chosen not to view images.

It provides a semantic meaning and description to images which can be read by

search engines or be used to later determine the content of the image from page

context alone.

5.7.2 Image Sprites or Web Icon Fonts

Choosing which of these to use depends upon the context within the application. For highly

detailed images, and not just simple icons, then create an image sprite. Otherwise for simple

icons, a web icon font has a lot of distinct advantages. They are especially useful for mobile

devices where icons play a much larger role in most designs. The best solution is not just to

choose one, but to integrate both into the web application.

5.7.2.1 Colors

It is recommended to use one solid color for system icons.

It is recommended to choose either black or white for system icons, or any other

primary UI color.

Refer to the Verify Color and Contrast section.

5.7.2.2 Sizes

Icons can vary in size.

When scaling icons, ensure the sizes used appear sharp on standard and high Pixels

Per Inch (PPI) screens

5.7.2.3 Usage

For performance, create icon bundles (sprites) containing only used icons.

Make sure that every image has <title> elements and ALT attributes that are

descriptive and accurate.


25

5.7.3 Image Maps

A client-side image map is an image divided into selectable regions defined by <area>

elements (“hotspots”) that allow user interaction. Usually the selectable regions are links to

other pages. For image maps, text alternatives are needed on both the <img> element itself

(to convey the informative context) and on each of the <area> elements (to convey the link

destination or the action that will be initiated if the link is followed), (Eggert, 2015).


Provide text alternatives that serve the same purpose as the selectable regions of an image

map. An image map is an image divided into selectable regions defined by area elements.

Each area is a link to another Web page or another part of the current Web page. The alt

attribute of each area element serves the same purpose as the selectable area of the image.

5.7.3.2 Usability

When to use

Use image maps when the information you need to convey is better presented visually

than in text. The best use of an image map is for, well, a map. Maps convey a large

amount of information in a small space. And image maps make them more

interactive.


Never use image maps for navigation.

Guidelines

Use every image map only once and if multiple images with the same map are to be

used, the map should be duplicated and have a different IDs.

Place the <map> element as a direct sibling to the image.

Include alt text in your maps and to include the links within the map somewhere else

on the page as plain text.



26

6 COMPONENTS

6.1 Form Controls

Form controls allow a user to enter information into a page by using methods of collection

outlined in the chosen framework. Any customization to the form controls must meet

accessibility requirements. U.S. Web Standards framework includes: text input, drop down,

check boxes, radio buttons, text area, and date input form controls, (Community 1. , Form

Controls, 2015).

6.1.1 Form Layout

It is recommended forms should be laid out vertically in a single column. Human beings

understand progress in forms as being vertically driven. Multiple columns are discouraged.

This is not a hard-and-fast rule, however; in some cases multiple columns can be utilized but

this should be rare and typically only applied to a single form element grouping (such as

"Password" and "Confirm Password").

Though these guidelines can help better position a form for your specific purpose, the

combination of layout, visual elements, and content that's right for you should still be

verified through user testing or data analysis (Wroblewski, 2005).

6.1.2 Label Position

Like all elements of an interface’s design, consistency with label positioning helps users and

minimizes errors. This is because the brain is wired for patterns; when positioning is

consistent the brain will rapidly learn where to look for labels. This means it’s best if you can

stick just one approach per form, (Enders, 2014).

Localization. Translated labels may be significantly longer in other languages.

Further, left-to-right languages (e.g., Arabic) naturally work better this way.

Human Eye Behavior. Human beings naturally group elements in vertical proximity

together.

6.1.3 Text Input

Text inputs allow people to enter any combination of letters, numbers, or symbols of their

choosing (unless otherwise restricted). Text input boxes can span single or multiple lines.


https://playbook.cio.gov/designstandards/form-controls/#text-inputs


27

Figure 3: Input Text Fields


Customized text inputs should continue to meet the accessibility requirements that apply

to all form controls.

Avoid placeholder text for accessibility reasons. Most browsers’ default rendering of

placeholder text does not provide a high enough contrast ratio.

Avoid breaking numbers with distinct sections (such as phone numbers, Social

Security Numbers, or credit card numbers) into separate input fields. For example, use

one input for phone number, not three (one for area code, one for local code, and one

for number). Each field needs to be labeled for a screen reader and the labels for fields

broken into segments are often not meaningful, (exceptions may be made for existing

systems and need only to apply to new systems only)

6.1.3.2 Usability

When to use

If you can’t reasonably predict a user’s answer to a prompt and there might be wide

variability in users’ answers.

When using another type of input will make answering more difficult. For example,

birthdays and other known dates are easier to type in than they are to select from a

calendar picker.

When users want to be able to paste in a response.



28


When users are choosing from a specific set of options.

Guidance

The length of the text input provides a hint to users as to how much text to write. Do

not require users to write paragraphs of text into a single-line input box; use a text

area instead.

Text inputs are among the easiest type of input for desktop users but are more

difficult for mobile users.

Only show error validation messages or stylings after a user has interacted with a

particular field.

Avoid using placeholder text that appears within a text field before a user starts

typing. If placeholder text is no longer visible after a user clicks into the field, users will

no longer have that text available when they need to review their entries. (People who

have cognitive or visual disabilities have additional problems with placeholder text.)

6.1.4 Dropdown

A dropdown allows users to select one or more options from a list, (Community 1. , Visual

Style, 2015).

Figure 4: Dropdown Menu


When customizing the dropdown, ensure it continues to meet the accessibility

requirements that apply to all form controls.

https://playbook.cio.gov/designstandards/form-controls/#dropdown


29

Make sure the dropdown has a label. Don’t replace it with the default menu option (for

example, removing the “State” label and just having the dropdown read “Select a

state” by default).

Don’t use JavaScript to automatically submit the form (or do anything else) when an

option is selected. Auto-submission disrupts screen readers because they select each

option as they read them.

6.1.4.2 Usability

When to use

Use sparingly — only when a user needs to choose from about seven to 15 possible

options and you have limited space to display the options.


If the list of options is very short (three options or less). Use radio buttons instead.

If the list of options is very long. Let users type the same information into a text input

that suggests possible options instead.

If you need to allow users to select more than one option at once. Users often don’t

understand how to select multiple items from dropdowns. Use checkboxes instead.

For site navigation (use the navigation components instead).

Guidance

Test dropdowns thoroughly with members of your target audience. Several usability

experts suggest they should be the “UI of last resort.” Many users find them confusing

and difficult to use.

Avoid making options in one dropdown menu change based on the input to another.

Users often don’t understand how selecting an item in one impacts another.

When most users will (or should) pick a particular option, make it the default: <option

selected="selected">Default</option>

Don’t use JavaScript to automatically submit the form (or do anything else) when an

option is selected. Offer a “submit” button at the end of the form instead. Users often

change their choices multiple times. Auto-submission is also less accessible.


30

6.1.5 Checkboxes

Checkboxes allow users to select one or more options from a visible list.

The use of select elements with the multi attribute is discouraged. In cases where the user can

select multiple options from a discrete set, a checkbox grouping is suggested instead.

The drawbacks of the "multi select" are many but two primary reasons stand out:

The element is rarely used. As a result, not many users innately understand how they

work.

Not all values are typically visible to the user. Additional scrolling is required. Again,

users may not understand the control.

Figure 5: Checkbox States (selected, deselected, normal, disabled)


If you customize the checkboxes, ensure they continue to meet the accessibility requirements

that apply to all form controls.

Surround a related set of checkboxes with a <fieldset>. The <legend> provides context

for the grouping. Do not use fieldset and legend for a single check.

Each input should have a semantic id attribute, and its corresponding label should

have the same value in it’s for attribute.

The title attribute can replace <label>.

6.1.5.2 Usability

When to use

https://playbook.cio.gov/designstandards/form-controls/#checkboxes


31

When a user can select any number of choices from a set list.

When a user needs to choose “yes” or “no” on only one option (use a stand-alone

checkbox). For example, to toggle a setting on or off.

When users need to see all the available options at a glance.

When to consider something different

If there are too many options to display on a mobile screen.

If a user can only select one option from a list (use radio buttons instead).

Guidelines

Users should be able to tap on or click on either the text label or the checkbox to

select or deselect an option.

List options vertically if possible; horizontal listings can make it difficult to tell which

label pertains to which checkbox.

Avoid using negative language in labels as they can be counterintuitive. For example,

“I want to receive a promotional email” instead of “I don’t want to receive

promotional email.”

If customized, make sure selections are adequately spaced for touch screens.

6.1.6 Radio Buttons

Radio buttons allow users to see all available choices at once and select exactly one.

Figure 6: Radio Button States (selected, deselected normal, disabled)


If you customize the radio buttons, ensure they continue to meet the accessibility

requirements that apply to all form controls.

https://playbook.cio.gov/designstandards/form-controls/#radiobuttons


32

Group related radio buttons together with <fieldset> and describe the group with

<legend>.

Each radio button should have a <label>. Associate the two by matching the <label>’s

for attribute to the <input>’s id attribute.

The title attribute can replace <label>.

6.1.6.2 Usability

When to use

When users need to select only one option out of a set of mutually exclusive choices.

When the number of available options can fit onto a mobile screen.


Consider checkboxes if users need to select more than one option or if there is only

one item to select.

Consider a dropdown if you don’t have enough space to list out all available options.

If users should be able to select zero of the options.

Guidance

Users should be able to tap on or click on either the text "label" or the radio button to

select or deselect an option.

Options that are listed vertically are easier to read than those that are listed

horizontally. Horizontal listings can make it difficult to tell which label pertains to

which radio button.

If you customize, make sure selections are adequately spaced for touch screens.

Use caution if you decide to set a default value. Setting a default value can discourage

users from making conscious decisions, seem pushy, or alienate users who don’t fit

into your assumptions. If you are unsure, leave nothing selected by default.

6.1.7 Fieldset

The grouping and labelling of thematically related controls within a form is an important

aspect of providing semantic information so users can understand and complete a form

successfully.

http://webaim.org/techniques/forms/controls#checkbox


33

Figure 7: Checkboxes in a Fieldset

Figure 8: Radio Buttons in a Fieldset


The HTML 5.1 draft specification provides a method for grouping and labeling related form

controls. This capability is provided by the use of the <fieldset> and <legend> elements,

(Fieldsets, Legends and Screen Readers, 2007).

When to use

The <fieldset> element allows authors to group thematically related controls and

labels. Grouping controls makes it easier for users to understand their purpose while

simultaneously facilitating tabbing navigation for visual user agents and speech

navigation for speech-oriented user agents.

The proper use of this element makes documents more accessible.

Whenever a label is needed to provide information about a related set of controls

consider using the LEGEND and FIELDSET elements.

6.1.7.2 Usability

Using a fieldset chunk-up multiple questions into, a minimal and clearly

identifiable groups of topics.

Make the page clearer to the sighted user, or the user who may have cognitive

difficulties.

6.1.8 Date and Phone Number Input

The text fields are the easiest way for users to enter most dates. The max limit for should be

changed depending on the context of the form

These text fields should follow the accessibility guidelines for all text inputs.

http://www.w3.org/html/wg/drafts/html/master/

https://playbook.cio.gov/designstandards/form-controls/#date-input


34

Do not use JavaScript to auto advance the focus from one field to the next. This makes

it difficult for keyboard-only users to navigate and correct mistakes (exceptions may

be made for existing systems and need only to apply to new systems only)

Figure 9: Day of Birth Using Three Textboxes

Figure 10: Domestic and International phone

number

6.1.8.1 Usability

When to use

Use this format for most dates, particularly memorized dates.


If users are trying to schedule something, a calendar picker might make more sense.

Be sure to also provide an option for text entry as well.

Guidelines

Be sure each field is properly labeled — some countries enter dates in day, month, and

year order.

It may be tempting to switch all or some of these text fields to drop downs, but these

tend to be more difficult to use than text boxes.

6.1.9 Required and Optional Fields

In the past, common practice has been to indicate on a form when fields are required and

assume all non-required fields are optional. However, over the past years, users have been

educated to assume that most fields are required and that few are optional (since this is

generally true).


35

Indicating both optional and required fields is overkill, so only the least common type is to be

indicated. Thus, if a form has 6 fields and only 2 are optional, the two optional entries should

be indicated. If a form has only one required field that should be called out.

For very short forms (such as a login form), it is not necessary to place any indications.

For long forms (more than 5 fields), a short notice should be given at the top indicating the

general state (e.g., "All field are required", or "All fields are optional except where noted",

etc.).

Optional fields should be indicated with a text string, "(Optional)", directly after the field

name. This should be in a smaller font and in a lower-intensity color.

Required fields should be indicated with a text string, "(Required)" or a symbol “*”, directly

after the field name. This should be in a smaller font and a red color.

Figure 11: Required Field Text

Figure 12: Required Field Asterisk

Figure 13: Optional Field Text


36

6.1.10 Focus Behaviors

When a text element is focused (has the cursor in it), its border should change color to

indicate that it is active. The framework chosen may have a default appearance. Many

modern browsers do this automatically.

Figure 14: Field with Focus

Figure 15: Field Without Focus

6.1.11 Tooltip Behaviors

Many tooltips always have arrows but the framework may have an alternative default look

and feel. The tool tip icons should be obvious and relatively large so that individuals with

poor eyesight can readily connect the help text with the element that it is referencing

(otherwise, they appear as random blobs of text without context).


37

Figure 16: Focused Field with Tooltip


The tooltip widget can be displayed via keyboard focus or by the onmouse event.

The tooltip widget can be hidden by removing focus from the text box or by moving

the mouse off the textbox.

The tooltip widget can be hidden by pressing the Escape key

6.1.11.2 Usability

It is recommended that tooltips should never obscure the field that they are attached to. As

such, the gravity should be northward. In some cases, a southward gravity may be applied (if

the trigger is below the element in question, but this should be rare).

The tooltip or infotip or a hint is a common graphical user interface element. It is used in

conjunction with a cursor, usually a pointer. When the pointer hovers over an item, without

clicking it, and a tooltip may appear—a small "hover box" with information about the item

being hovered over.

6.1.12 Form Control Instructions

Some form elements will benefit by the inclusion of a short set of instructions. Instructions

should be placed on a line below the field name and above the input mechanism in a smaller,

greyed font.

Field-level instructions should be short and to the point. If additional information is

necessary, a link should be provided for more information. This link can activate a tooltip or

open further information in a new window or tab. Active links within instructions should

always be underlined.


38

Figure 17: Linked Set of Instructions

6.1.13 Placeholder Text

Some form elements can benefit from the presence of data "hints". Placeholders help the

user to decide at a glance the type of data a field takes.

Hint text should be placed within the input mechanism. It should be a light color and the text

should be as generic as possible (e.g., "[email protected]" or "(123) 123-1234").

A field with hint text achieves focus (when the cursor is placed within it), the hint text should

become even lighter. Once the user starts typing or inputs data, the hint text should

disappear.

If the user clears the field, the hint text should return. Hint behaviors should be done

exclusively with HTML5 placeholder attributes. Older browsers will not support this.

Figure 18: Labels with Placeholder Text


The default color of the placeholder text, in browsers that support placeholder, is not

of sufficient contrast with its default background color. Sufficiency is measured using

the WCAG 2.0 criteria 1.4.3 Contrast (Minimum): The visual presentation of text and

images of text has a contrast ratio of at least 4.5:1.

http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef


39

6.1.13.2 Usability

If you choose to use the placeholder attribute be aware its support across browsers is

incomplete and its styling support is still experimental.

If available, apply a style to the placeholder attribute text that has a contrast ratio of

at least 4.5:1.

6.2 Alerts

Alters keep users informed of important and sometimes time-sensitive changes. Alerts

provide contextual feedback messages for typical user actions, as well as alerting them to

important information they may need to know. Information and warning messages usually

appear at the top of a page, while success and error messages might appear above a form.

Use the appropriate color recommended by the framework for the message.

Figure 19: Alerts for Success, Warning, Error, Information

6.2.1 Feedback

Feedback provides users with the information they need to understand where they are within

the website, and for proceeding to the next activity. Forms of feedback include changing the

color of a link that has been clicked (suggesting that destination has been visited), and using

other visual cues to indicate the active portion of the screen, (Farkas, 2000).

https://playbook.cio.gov/designstandards/alerts/


40

6.3 Tables

Use tables only when presenting tabular data in column and rows. They should not be used

for layout purposes. Follow the guidelines for tables governed by the framework used,

(Community 1. , Tables, 2015).

Figure 20: Bordered Table

Figure 21: Borderless Table

6.3.1 Accessibility

Simple tables can have two levels of headers. Each header cell should have

scope='col' or scope='row'.



41

Complex tables are tables with more than two levels of headers. Each header should

be given a unique id and each data cell should have a HEADER attribute with each

related header cell’s ID listed.

When adding a title to a table, include it in a <caption> tag inside of the <table>

element.

6.3.2 Usability

When to use

When you need tabular information, such as statistical data.


Depending on the type of content, consider using other presentation formats such as

definition lists or hierarchical lists.

Guidance

Tables are great at displaying tabular data. Minimal visual styling helps surface this

information more easily.

6.4 Buttons

For short forms with only one button, it is advised to place the button directly below the last

field element and left aligned. Human eye tracking runs vertically and placing the button at

the bottom is most natural psychologically.

However, for forms with multiple buttons, the buttons should be grouped together and right

aligned at the bottom. This creates a psychological "break" in the flow and causes the user's

short term memory to reset, allowing them to process the activity they are undertaking.

Text only links should rarely, if ever, be used for button actions. It is tempting to display

"cancel" events as text but this should be avoided where possible; users have been trained to

see buttons as actionable events and text links as data events. Text can have styling to

appear as a button.

Use larger or smaller button sizes corresponding to the contexts of the task and visual

communication goals.

https://playbook.cio.gov/designstandards/buttons/


42

6.4.1 Primary Buttons

Figure 22: Primary Buttons

6.4.2 Secondary Buttons

Figure 23: Secondary Buttons

6.4.3 Button Focus

Figure 24: Button Having Focus


43

6.4.4 Disabled and Big Buttons

Figure 25: Disabled Button

Figure 26: Big Button


Buttons should display a visible focus state when users tab to them.

Avoid using <div> or <img> tags to create buttons. Screen readers don't automatically

know either is a usable button.

When styling links to look like buttons, remember that screen readers handle links

slightly differently than they do buttons. Pressing the Space key triggers a button, but

pressing the Enter key triggers a link.

6.4.4.2 Usability

When to use

Use buttons for the important actions you want users to take on your site, such as

“next”, “previous”, “cancel”, “save”, "download," "sign up," or "log out."


If leading users between pages of a website. Use links instead.

Less popular or less important actions may be visually styled as links.

Guidance

Generally, use primary buttons for actions that go to the next step and use secondary

buttons for actions that happen on the current page.

The secondary button: “close” or “cancel” is left justified and in a disabled state.

Make sure buttons should look clickable—use color variations to distinguish static,

hover and active states.

Avoid using too many buttons on a page.


44

Use sentence case for button labels.

Button colors are defined by the chosen framework if any.

Button labels should be as short as possible with “trigger words” that your users will

recognize to clearly explain what will happen when the button is clicked (for example,

“download,” “view” or “sign up”).

Make the first word of the button’s label a verb. For example, instead of “Complaint

Filing” label the button “File a complaint.”

6.4.5 Button Labels

In general, buttons should say exactly what they are doing and always re-stress what is

happening. "Submit" is bad; "Save Changes" is better. "Cancel" is bad; "Discard Changes" is

better.

6.4.6 Button Iconography

Button iconography is not required but is always a nice touch. With the exception of

continuation buttons, iconography should be placed to the left of the button text.

Continuation button iconography should be placed to the right.

In general, icons on continuation buttons should be arrows pointing right. Buttons that take

the user backwards in a series of steps should contain arrows pointing left.

Other iconography should depend upon the function of the framework. It is acceptable to

only include iconography on continuation buttons.

Figure 27: Buttons with Action Icons

6.5 Progress Control

Sometimes a task running within a program might take a while to complete. A user-friendly

program provides some indication to the user that the task is occurring, how long the task

might take, and how much work has already been done.

http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp


45

A progress control provides feedback to the user that a long-running operation is underway.

A determinate progress bar shows the percentage of completion of an operation. It is also a

good indicator of state or position. An indeterminate progress bar, or a progress ring/wheel,

shows that an operation is underway.

Sometimes you can't immediately determine the length of a long-running task, or the task

might stay stuck at the same state of completion for a long time. You can show work without

measurable progress by putting the progress bar in indeterminate mode.

Figure 28: Determinate Progress Bars

A progress bar in indeterminate mode displays animation to indicate that work is occurring.

As soon as the progress bar can display more meaningful information, you should switch it

back into its default, determinate mode.

Figure 29: Indeterminate Progress Bar

A progress control is read only; it is not interactive.

6.5.1 Activity Indicators

Activity Indicators are very important tools that help users to have an understanding of what

is going on with the system and what are responses from the system. Indicators should be

shown as soon as request starts and hidden when request ends.

6.5.2 Usability

Activity Indicators provide a strong visual clue that request is in progress. They can be shown

as simple text or as an image, usually animated.


46

If it is in a text form, be sure to provide meaningful message, like “Sending email”

rather than “Waiting…” that could confuse users. What am I waiting for? Is something

wrong with the system?

If it is an animated image they are usually represented by rotating animation.

Figure 30: Loading Icon

The usage of Asynchronous JavaScript and XML (Ajax) in web applications and web sites is

rapidly increasing. If not handled properly Ajax functionalities can break users’ expectations

and conventions.

While one Ajax request is in progress user can start another one which may bring about the

risk of data damage. By double clicking the same button or by clicking on another users can

even cause an application failure. But if that happens it’s not their fault.

This can be easily prevented by disabling UI elements during Ajax request.

Depending on the case, disable a particular element or disable the entire user

interface.

UI elements should be disabled when Ajax request starts and enabled again when

request ends.

Show status message indicating whether operation failed or succeeded.

6.6 Breadcrumbs

Breadcrumb navigation can greatly enhance the way users find their way around. In terms of

usability, breadcrumbs reduce the number of actions a website visitor needs to take in order

to get to a higher-level page, and they improve the findability of website sections and pages.

They are also an effective visual aid that indicates the location of the user within the

website’s hierarchy, making it a great source of contextual information for landing pages.

A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that

reveals the user’s location in a website or Web application. They offer users a way to trace the

path back to their original landing point.

http://www.w3.org/WAI/tutorials/menus/multiple-ways/


47

Figure 31: Breadcrumb Trail

7 Search Bar

A block that allows users to search for specific content if they know what search terms to use

or can’t find desired content in the main navigation

Figure 32: Large, Medium, and Small Search Bars

7.1 Accessibility

As you customize this form template, ensure it continues to follow the accessibility

guidelines for form templates and the accessibility guidelines for form controls.

Always include the word "search" inside the <button> element for screen readers. You

can visually hide this text using the proper CSS for the framework.

7.2 Usability

When to use

There will always be users who are confused by your navigation system and who

would benefit from being able to search your site.


https://playbook.cio.gov/designstandards/components/#forms-blocks

https://playbook.cio.gov/designstandards/components/#forms-blocks

https://playbook.cio.gov/designstandards/elements/#inputs

https://playbook.cio.gov/designstandards/search-bar/


48

On single-page or very small sites, you may be able to get away without a search bar.

Guidance

Allow the search bar to be as wide as possible, but a minimum of 27 characters wide.

This allows users to enter multiple search terms and still be able to see all of them.

The more users can see their search terms, the easier it is to review, verify, and submit

their search query.

The magnifying glass has been shown to be almost universally recognized by users as

an indicator of search, and doesn’t need to be visually paired with the word "Search"

as long as it remains for screen readers.

Maintain this search bar when displaying the search results with the original search

terms.

On a site's home page the search function should appear as a search box instead of a

link so users can locate it easily.

Don't offer advanced search as the default option. The majority of people will do a

simple search with one or two search terms. If advanced search is offered, it increases

the likelihood of a person making a mistake in their query.

Even if the search bar isn't visually displaying a label, the form field should include a

label for screen reader users.

The search button itself should be a submit button for the form to reduce the number

of keystrokes required to use the form.

8 Accordions

Accordions are a list of headers that can be clicked to hide or reveal additional content.

Usually they are vertically stacked list of headers that can be clicked to reveal or hide content

associated with them. It is one of many ways you can expose content to users in a progressive

manner. Allowing people to have control over the content by expanding it or deferring it for

later lets them decide what to read and what to ignore, (Accordions Are Not Always the

Answer for Complex Content on Desktops, 2014) .

https://playbook.cio.gov/designstandards/accordions/


49

Figure 33: Accordion Content

8.1 Accessibility

Code header areas in the accordion as <buttons> so that they are usable with both

screen readers and the keyboard.

Buttons should state whether they are expanded or not with the appropriate attribute

used by the framework. For example: <aria-expanded=’true’> or <aria-

expanded=’false’>.

Each button in the framework has a unique name <aria-controls=’collapsible-#’> that

associates the control to the appropriate region by referencing the controlled

elements ID.

Each content area in the framework has an <aria-hidden> attribute set to either <true> or <false>. When <true>, the element (and all children) is neither visible nor

perceivable, and assistive technologies will skip this content.

8.2 Usability

When to use

Users only need a few specific pieces of content within a page.

Information needs to be displayed in a small space.


If visitors need to see most or all of the information on a page. Use well-formatted text

instead.


50

If there is not enough content to warrant condensing. Accordions increase cognitive

load and interaction cost, as users have to make decisions about what headers to click

on.

Guidance

Allow users to click anywhere in the header area to expand or collapse the content; a

larger target is easier to manipulate.

Make sure interactive elements within the collapsible region are far enough from the

headers that users don’t accidentally trigger a collapse. (The exact distance depends

on the device.)

9 NAVIGATION

Navigation refers to the method used to find information within a Website. Navigation is used

primarily to help users locate and link to destination pages. A Web application’s navigation

scheme and features should allow users to find and access information effectively and

efficiently.

Most web applications use some form of a global horizontal menu. Horizontal navigation bar

is easy to scan, it has become a convention that users understand and expect.

A Main Navigation is a type of navigation that runs on every page, containing links to the

major sections of that web application.

"Home" is the convention for the name of the overall homepage.

Figure 34: Global Navigation


51

9.1 Accessibility

Add the role="navigation" to the most logical parent container of the <ul>, or wrap a

<nav> element around the whole navigation. Do not add the role to the <ul> itself, as

this would prevent it from being announced as an actual list by assistive technologies.

9.2 Usability

Organize information according to how user interact with it.

Don't force navigation to match internal structures. Use research to understand how

users search for information.

Keep section and page names simple and short

Every page should have a way for a user to get back to the previous page, section

page, and home page

Use descriptive tab labels

Text links should link to the word or phrase that defines the link. Instead of "click here

to find a glossary," try "use our glossary"

Clearly differentiate navigation elements from one another, but group and place them

in a consistent and easy to find place on each page.

10 SIDEBAR/ LOCAL NAVIGATION

Navigation performance is best when the secondary and tertiary menus were placed

together. Placing a navigation menu in the right panel is supported as a viable design option

by both performance and preference measures. On long pages, provide a 'list of contents'

with links that take users to the corresponding content farther down the page; Hierarchical,

vertical navigation to place at the side of a page, (Farkas, 2000).

10.1 Accessibility

Ensure the side navigational system is keyboard accessible. Users should be able to

tab through each link.

10.2 Usability

When to use

To display a navigational hierarchy with one to three levels.

To display the “sub-navigation” within a section of the website.

https://playbook.cio.gov/designstandards/sidenav/


52


If the site has fewer than five pages, consider organizing the page without a

navigational hierarchy.

If your page already has a horizontal and vertical navigation bar, consider ways to

simplify your navigation system.

If your content is within a frame or sub-area of a page, consider ways to simplify your

navigation system.

Guidance

Indicate where a user is within the navigational hierarchy. Use the “active” state to

show users which page they have navigated to.

Keep the navigation links short. They can be shorter derivatives of page titles

themselves. If the navigation hierarchy is too long, users may miss items at the

bottom. If it’s too deep, users may miss items that require too many clicks. Usability

test to find the right balance between breadth and depth.

Figure 35: Sidebar Navigation

11 SECTION 508 COMPLIANCE

This is 508 overview provides a high level description of best practices for accessibility

requirements and issues. For more detailed information, consult the website Section 508

Standards for Electronic and Information Technology, (Board, 2000).

http://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards#subpart_b


53

Meeting these best practices will aid assistive technologies in the presentation of Web site

content for disabled users.

11.1 Syntax validation

Contemporary, maintainable, accessible web design is based on complete separation of

structure (HTML) from style (CSS) with both conforming to W3C standards; valid code

contributes to accurate presentation by both standard browsers and assistive technologies.

11.2 Semantic validation

Page elements that function as links (including text, images, and buttons) should be

recognizable and usable by sighted viewers and assistive technology.

Remove broken links and empty links, these items are confusing to all users.

Users are helped by logically-organized page content that uses section headings and

sub-headings in their proper order; visitors using assistive technology can use the

headings for easy navigation between sections of the page.

A new browser window can be confusing to users because it will “break” the browser

back button. Best practice is to not open new windows. If opening a new window is

absolutely necessary, then Include link text that notifies the user that a new window is

being opened.

11.3 Alternate Text - Checkpoint (a)

"A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in

element content)."

Screen readers cannot interpret non-text elements, which are most often images, text

alternatives must be provided by using the HTML alt attribute.

Internet Explorer for Windows displays alt text as a tool tip that appears when you

hover over the element, even when the element itself is also displayed. However,

don't rely on this feature, as most other browsers don't display a tool tip for alt text. If

you need a tool tip (or equivalent) to appear, use the title attribute in addition to the

alt.

Purely decorative images (images that add no material value to those using assistive

technology) should be coded as alt="" (alt equals double-quote double-quote with no

spaces).

Multimedia elements should have text alternatives synchronized with its content.


54

11.4 Multimedia Equivalents - Checkpoint (b)

"Equivalent alternatives for any multimedia presentation shall be synchronized with the

presentation."

Captioning allows deaf people to comprehend multimedia with text. You must synchronize

captions for media such as video, audio, or animations.

11.5 Color - Checkpoint (c)

"Web pages shall be designed so that all information conveyed with color is also available

without color, for example from context or mark-up."

Section 508 guidelines do not discourage color, just the use of color to convey information.

11.6 CSS Style Sheets and Headings - Checkpoint (d)

"Documents shall be organized so they are readable without requiring an associated style

sheet."

Section 508 guidelines implicitly support the use of CSS style sheets, your application should

use them to help make the web pages accessible.

Make the web pages usable if the style sheet is turned off. This is because some

disabled users use their own style sheets to make text larger or to make the web site

display high contrast colors.

11.7 Server-Side Image Maps - Checkpoint (e)

"Redundant text links shall be provided for each active region of a server-side image map."

When you click on a hot area of a server-side image map, the server decides where to take

you. This poses problems for screen readers, since screen readers do not know where the link

goes, which means users of your application won't know as well.

Use client-side image maps wherever possible. If you must use server-side image

maps, include redundant links for each active region and locate the links next to or

below the image map.

The alt text is used to alert the user that alternate links are available for the server-

side image maps.


55

11.8 Client-Side Image Maps - Checkpoint (f)

"Client-side image maps shall be provided instead of server-side image maps except where the

regions cannot be defined with an available geometric shape. Client-side rather than server-

side image maps should be used unless there are limitations in creating hot spots in client-side

image maps tools/software."

Client-side image maps have clickable hot spots that act as links. Clicking on a different area

of the image takes users to a different place.

Label each of your hot spots with alt text to tell the screen reader where each hot spot

takes the user.

11.9 Simple Tables - Checkpoint (g)

"Row and column headers shall be identified for data tables."

Always have the tables' headings defined. This lets the screen reader know what it is reading

in each table.

Tables used only for layout should NEVER have row and column headers.

11.10 Complex Tables - Checkpoint (h)

"Mark-up shall be used to associate data cells and header cells for data tables that have two or

more logical levels of row or column headers."

Complicated data tables sometimes have more than one column or row header associated

with each column or row. In this case, the markup must tell the screen reader which headers

correspond to which column or row.

11.11 Frames - Checkpoint (i)

"Frames shall be titled with text that facilitates frame identification and navigation."

It is recommended that the use of frames be avoided. If used, every frame page must be titled

correctly, and the title should reflect the frames' contents.

The navigation frame should be called "navigation," the content frame should be

called "main content," and so on.

Frames are used by web designers to arrange content into distinct regions of a web page—

regions like menus, navigation panes, and main content. Frames are also used to insert

content into the page that can be updated independently from the rest of the page content.


56

When used accordingly iframes should follow rules for Section 508 compliance, (Affairs U. D.,

Tables, 2014).

11.12 Screen Flickering - Checkpoint (j)

"Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2

Hz and lower than 55 Hz."

People who have photosensitive epilepsy are susceptible to seizures if your web site contains

flashing elements. Flickering is usually annoying to all users, stay away from it all together.

If you must have flickering elements, make sure they meet the guidelines.

11.13 Provide Text Only Pages as a Last Resort - Checkpoint (k)

"A text only page, with equivalent information or functionality, shall be provided to make a web

site comply with the provisions of this part, when compliance cannot be accomplished in any

other way. The content of the text only page shall be updated whenever the primary page

changes."

Never resort to a text only pages before attempting to make them accessible.

11.14 Scripts - Checkpoint (l)

"When pages utilize scripting languages to display content, or to create interface elements, the

information provided by the script shall be identified with functional text that can be read by

assistive technology."

The most predominant scripting language for the web is JavaScript.

Avoid using scripts (most notably JavaScript) to generate content (especially

navigation such as dropdown menus). If there is no other option

The content generated by the scripting should be accessible with or without

JavaScript turned on, unless the content is purely decorative.

The content must be available to both mouse and keyboard users.

11.15 Provide Links to Necessary Plug-Ins - Checkpoint (m)

"When a web page requires that an applet, plug-in, or other application be present on the client

system to interpret page content, the page must provide a link to a plug-in or applet that

complies (a) through (l) checkpoints"

If your application requires users to download a plug-in before viewing your content, the

application must provide a link to the plug-in, and the link itself must comply with Section


57

508 guidelines. The web site that the plug-in resides in must follow Section 508 guidelines as

well.

11.16 Forms - Checkpoint (n)

"When electronic forms are designed to be completed on-line, the form shall allow people using

assistive technology to access the information, field elements, and functionality required for

completion and submission of the form, including all directions and cues."

Forms must be created with accessibility and usability in mind. There are a number of factors

that contribute to the accessibility and usability of forms, including layout, labeling and

grouping. Most of the factors mentioned were covered in the section Form Control in this

document.

When web users enter data and submit it, they’re using a form. Every form, no matter how

simple, comes with at least one form control. As long as the controls have been properly

marked up, AT can provide the user with excellent access to them. Follow the rules on how to

design each control to meet 508 requirements, (Affairs U. D., Forms, 2014).

11.17 Skip Repetitive Navigation Links - Checkpoint (o)

"A method shall be provided that permits users to skip repetitive navigation links."

If Navigation links are the first things that appear in your code, then the application have to

provide a skip navigation link. Sighted users can skip links by scanning past them on every

web page. A person using a screen reader or keyboard only navigation, however, would have

to go through each link manually to get to the main content section.

11.18 Timed Responses - Checkpoint (p)

"When a timed response is required, the user shall be alerted and given sufficient time to

indicate more time is required."

The application must communicate the users when their session is about to time out if you

employ this method. Disabled users may take longer to go through a Web site, so they should

have an option to request more time.


58

12 ASSISTIVE TECHNOLOGY

Anytime a government agency develops, procures, uses, or maintains electronic information,

it must make sure that the information is accessible to people with disabilities, as defined by

federal standards.

These standards are based on Section 508 of the Rehabilitation Act. Some standards spell out

what the content must include from a technical perspective. Others are functional, describing

methods of access that must be available to people with disabilities.

It is recommended to use a compliant framework such as the 18f or equivalent one which

addresses some of the barriers people with disabilities face when content is not accessible.

Accessible content is how easily a person with disability can locate and understand the

information they need but Section 508 refers to the law federal agencies must meet when

purchasing or developing electronic information.

Assistive technology (AT) enables people with disabilities to perform tasks that might

otherwise be difficult or impossible. AT products are designed to provide additional

accessibility to individuals who:

Are blind, or have vision impairments or color deficiencies.

Are deaf or hard of hearing, including those who need assistive hearing devices.

Are unable to speak or have speech impairments.

Have motor disabilities.

Have cognitive disabilities.

Have photosensitive epilepsy.

Have print disabilities such as dyslexia.

With AT, users can:

Listen as web pages are read to them.

Use refreshable braille to review electronic content.

Enlarge words and pictures.

Change background and foreground colors on a screen.

Use their voice to open a browser, pause a video, or fill out a form.

Navigate a web page without using a keyboard or mouse.


59

12.1 Page Structure

Developers for the government need to keep aware of the 508 requirements that each style

element discussed in this guide must meet. Structural elements form the building blocks of

HTML web pages including: page titles, headers, lists, and others. You’ll also learn the Section

508 requirements that each kind of element must meet. Assistive technology (AT) users rely

on a page’s structural elements to convey meaning and the framework may have the ability

to allow those users to adjust the page’s style sheets without changing its reading order,

(Affairs U. D., Page Structure, 2014).

12.2 Navigation and Keyboard Access

Web page content must be navigable by everyone, including people who use AT and people

who can’t use a mouse. Alternative keyboard access and navigation should be built into the

webpage. The framework may recommend compliant scripts, naming of links, and the ability

to skip past repetitive link groups, (Affairs U. D., Navigation and Keyboard Access, 2015).

12.3 Focus

Having a definitive focus on elements is vital for users with disabilities. Be cognizant of

unexpected focus changes, (Affairs U. D., Focus, 2014).

12.4 Rich Internet and Mobile Content

New, emerging technologies and rich Internet applications (RIAs) may require custom

treatment which may not be covered by the framework used. HTML5 techniques for mobile

users and the Accessible Rich Internet Application (ARIA) may be required, (Affairs U. D., Rich

Internet and Mobile Content, 2014).


60

13 REFERENCES

Accordions Are Not Always the Answer for Complex Content on Desktops. (2014, May 18). Retrieved from

Nielsen Norman Group: http://www.nngroup.com/articles/accordions-complex-content/

Affairs, U. D. (2014, July 17). Animation, Dynamic Content, Timed Responses and Flashing Content.

Retrieved from Testing HTML for Section 508 Compliance:

http://www.section508.va.gov/support/html/11_0.asp

Affairs, U. D. (2014, May 23). Color. Retrieved from Testing HTML for Section 508 Compliance:


Affairs, U. D. (2014, May 30). Focus. Retrieved from Testing HTML for Section 508 Compliance:


Affairs, U. D. (2014, July 17). Forms. Retrieved from Testing HTML for Section 508 Compliance:


Affairs, U. D. (2014, July 17). Multimedia and Embedded Content. Retrieved from Testing HTML for

Section 508 Compliance: http://www.section508.va.gov/support/html/9_0.asp

Affairs, U. D. (2014, May 23). Page Structure. Retrieved from Testing HTML for Section 508 Compliance:


Affairs, U. D. (2014, June 13). Rich Internet and Mobile Content. Retrieved from Testing HTML for


Affairs, U. D. (2014, July 17). Tables. Retrieved from Testing HTML for Section 508 Compliance:


Affairs, U. D. (2014, July 17). Tables. Retrieved from Testing HTML for Section 508 Compliance:


Affairs, U. D. (2014, May 23). Text Equivalents for Non-Text Items. Retrieved from Testing HTML for


Affairs, U. D. (2014, July 17). Text-Only and Alternative Content. Retrieved from Testing HTML for


Affairs, U. D. (2015, March 10). Navigation and Keyboard Access. Retrieved from Testing HTML for



61

Bacic, H. (2014, March 6). 10 Best Sans-Serif Web Fonts From Google Fonts Library. Retrieved from

http://www.forbes.com: http://www.forbes.com/sites/allbusiness/2014/03/06/10-best-sans-

serif-web-fonts-from-google-fonts-library/

Board, U. S. (2000, December 21). Section 508 Standards for Electronic and Information Technology.

Retrieved from United States Access Board: http://www.access-board.gov/guidelines-and-

standards/communications-and-it/about-the-section-508-standards/section-508-

standards#subpart_b

Community, 1. (2015). Form Controls. Retrieved from U.S. Web Design Standards:


Community, 1. (2015). Grids. Retrieved from U.S. Web Design Standards:


Community, 1. (2015). Tables. Retrieved from U.S. Web Design Standards:


Community, 1. (2015). U.S. Web Design Standards. Retrieved from

https://playbook.cio.gov/designstandards/: https://playbook.cio.gov/designstandards/

Community, 1. (2015). Visual Style. Retrieved from U.S. Web Design Standards:

https://playbook.cio.gov/designstandards/visual-style/

Community, 1. (2015). Visual Style. Retrieved from U.S. Web Design Standards:


Community, W. (2015). Understanding Conformance. Retrieved from Understanding WCAG 2.0:

http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html

DHS. (2003, October). DHS House Style Guide. Retrieved from Computer Science and Mathematics

Division:

http://www.csm.ornl.gov/SC2007/pres/White_Collaborators_Judy/Collaborators%20logos/G

overnment/homeland%20security_DHS%20logo/DHS_HouseStyle_101703.pdf

Eggert, E. (2015, March 2). Image Maps. Retrieved from Web Accessibility Tutorials:


Enders, J. (2014, May 14). The Definitive Guide to Form Label Positioning. Retrieved from Sitepoint:

http://www.sitepoint.com/definitive-guide-form-label-positioning/

Farkas, D. (2000). Giudlines for Designing Web Navigation. Technical Communicaiton, 341-348.


62

Fieldsets, Legends and Screen Readers. (2007, November 22). Retrieved from The Paciello Group:

https://www.paciellogroup.com/blog/2007/11/fieldsets-legends-and-screen-readers/

Wroblewski, L. (2005, January 22). Web Application Form Design. Retrieved from

http://www.lukew.com/ff/entry.asp?1502

Date post:	11-Aug-2020
Category:	Documents
Upload:	others
View:	0 times
Download:	0 times