연습: 내게 필요한 옵션이 지원되는 웹 응용 프로그램 만들기

  • 아티클

업데이트: 2007년 11월

내게 필요한 옵션이 지원되는 웹 페이지를 만들면 더 많은 고객을 만날 수 있습니다. 내게 필요한 옵션이 지원되는 페이지는 장애인만 사용하는 것은 아닙니다. 텍스트 전용 브라우저나 웹 페이지 콘텐츠 해석 소프트웨어를 사용하는 사람들도 내게 필요한 옵션을 활용할 수 있습니다. 내게 필요한 옵션을 만들어 검색 엔진과 같은 자동화 도구를 사용하면 웹 페이지의 정보를 검색, 인덱싱 및 사용할 수 있습니다. 또한 향후 정보통신법에서는 일반적인 소프트웨어와 마찬가지로 인터넷을 통해 배포된 정보에도 액세스할 수 있도록 요구할 수 있습니다. 자세한 내용은 ASP.NET의 내게 필요한 옵션 지원 및 ASP.NET 컨트롤 및 내게 필요한 옵션을 참조하십시오.

Microsoft Accessibility 웹 사이트에서 내게 필요한 옵션이 지원되는 웹 페이지를 디자인하는 데 필요한 다음 정보를 얻을 수 있습니다.

  • 모든 그래픽에 대해 적절한 대체(ALT) 텍스트 제공

  • 이미지 맵의 올바른 사용

  • 유용한 링크 텍스트 작성

  • 유용한 키보드 탐색 디자인

  • 프레임을 사용하지 않는 대체 페이지 제공

  • 표 및 대체 기능의 올바른 사용

  • 텍스트 판독기에 대한 서식 옵션 지원

  • 스타일시트를 사용하지 않아도 됨

  • 판독기에서 사용할 수 있는 파일 형식 사용

  • 움직이는 텍스트를 사용하지 않음

  • 대부분의 개체에 제목 제공

내게 필요한 옵션에 관련된 목표를 충족할 수 없을 경우에는 텍스트 전용 웹 페이지를 사용해 보십시오.

ASP.NET 컨트롤은 내게 필요한 옵션에 관한 여러 지침을 지원하며, 키보드 포커스 및 화면 요소 표시 기능이 포함됩니다. 다음 표에서 볼 수 있듯이 ASP.NET 컨트롤의 속성을 사용하여 내게 필요한 옵션에 관한 다른 지침을 지원할 수 있습니다.

컨트롤 속성

내게 필요한 옵션 고려 사항

TabIndex

폼을 탐색할 수 있는 기능적인 경로를 만드는 데 사용합니다. 텍스트 상자와 같이 내장 레이블이 없는 컨트롤의 경우 탭 순서에서 관련 레이블을 해당 컨트롤의 바로 앞에 두어야 합니다. 레이블을 컨트롤 바로 앞에 두기 어렵거나 이 방식을 원하지 않을 경우에는 Label 컨트롤의 AssociatedControlID 속성을 사용하여 레이블을 텍스트 상자에 연결합니다.

Text

HTML u 요소를 사용하여 컨트롤의 바로 가기 키를 표시합니다. 선택키를 사용하면 모든 기능에 대해 문서화된 키보드 액세스가 지원됩니다. 컨트롤에 대한 바로 가기 키를 사용하도록 설정하려면 AccessKey 속성을 사용합니다.

Font Size

특정 크기가 아닌 머리글 태그를 사용합니다.

AlternateText

웹 페이지 콘텐츠에 중요한 모든 이미지를 이해할 수 있도록 대체 텍스트를 제공합니다. 그래픽 서식에 사용되는 이미지와 같이 이미지의 대체 텍스트를 설정하지 않는 것이 적절한 경우도 있습니다. 이미지의 AlternateText 속성을 빈 상태로 렌더링하려면 Image 컨트롤의 GenerateEmptyAlternateText 속성을 true로 설정합니다.

AccessKey

키보드로 컨트롤에 액세스할 수 있도록 하는 데 사용합니다.

사전 요구 사항

이 연습을 완료하려면 다음과 같은 요건을 갖추어야 합니다.

  • Microsoft Visual Web Developer 웹 개발 도구

  • .NET Framework

웹 사이트 및 페이지 만들기

이 연습에서는 대수학 수업에 사용할 웹 사이트를 만듭니다. 사용자 인터페이스에는 다음 컨트롤이 사용됩니다.

  • 수업 로고에 사용할 Image 컨트롤

  • 강의에 필요한 HyperLink 컨트롤을 포함하는 Panel 컨트롤

  • 수업 시간표가 포함된 표를 나타내는 GridView 컨트롤

  • 수업 교재를 설명하는 페이지로 연결되는 HyperLink 컨트롤

이 연습에서 중점적으로 살펴볼 내용은 내게 필요한 UI(사용자 인터페이스) 옵션과 이를 지원하기 위해 웹 서버 컨트롤을 사용하는 방법입니다. 이 연습에서는 HyperLink, GridView, Image 및 Label 컨트롤 등 자주 사용되는 몇 가지 컨트롤의 내게 필요한 옵션 기능을 보여 줍니다. HyperLink 컨트롤은 모두 같은 웹 페이지를 탐색하지만 해당 웹 페이지는 비어 있습니다.

다음 절차에서는 파일 시스템 웹 사이트를 만들고 Lecture.aspx라는 페이지를 추가합니다.

파일 시스템 웹 사이트를 만들려면

  1. Visual Web Developer를 엽니다.

  2. 파일 메뉴에서 새 웹 사이트를 클릭합니다.

    새 웹 사이트 대화 상자가 나타납니다.

  3. Visual Studio에 설치되어 있는 템플릿에서 ASP.NET 웹 사이트를 클릭합니다.

  4. 위치 상자에 웹 사이트의 페이지를 보관할 폴더의 이름을 입력합니다.

    예를 들어, 폴더 이름 C:\WebSites를 입력합니다.

  5. 언어 목록에서 작업할 프로그래밍 언어를 클릭합니다.

  6. 확인을 클릭합니다.

    Visual Web Developer에서 해당 폴더와 Default.aspx라는 새 페이지를 만듭니다.

  7. 솔루션 탐색기에서 웹 사이트의 이름을 마우스 오른쪽 단추로 클릭한 다음 새 항목 추가를 클릭합니다.

  8. Visual Studio에 설치되어 있는 템플릿에서 Web Form을 클릭합니다.

  9. 이름 상자에 Lecture.aspx를 입력한 다음 확인을 클릭합니다.

표시할 데이터 만들기

새로 만드는 페이지에는 대수학 수업 강의에 대한 정보가 표시됩니다. 이 연습에서는 해당 수업의 데이터가 XML 파일로 저장됩니다.

XML 데이터 파일을 만들려면

  1. 솔루션 탐색기에서 App_Data 폴더를 마우스 오른쪽 단추로 클릭하고 새 항목 추가를 클릭합니다.

    참고:

    App_Data 폴더에 XML 파일을 추가해야 합니다.

  2. 새 항목 추가 대화 상자의 Visual Studio에 설치되어 있는 템플릿에서 XML 파일을 클릭합니다.

  3. 이름 상자에 Syllabus를 입력합니다.

  4. 추가를 클릭합니다.

  5. 파일에 다음 XML을 복사하여 기본 내용을 덮어씁니다.

    <?xml version="1.0" encoding="utf-8" ?>
<entries>
    <lecture 
       date="04/02/2005" 
       topic="Integers and Rational Numbers" />
    <lecture 
        date="04/03/2005"
        topic="Equations and Polynomials" />
    <lecture
        date="04/04/2005"
        topic="Roots and Irrational Numbers" />
</entries>

  6. XML 파일을 저장한 다음 닫습니다.

폼에 컨트롤 추가

이 응용 프로그램의 폼에 컨트롤을 추가할 때는 내게 필요한 옵션이 지원되는 응용 프로그램을 만들기 위해 다음 지침을 따라야 합니다.

  • 사용자 정보를 제공하는 모든 이미지에는 의미를 설명하는 대체 텍스트가 포함되어야 합니다.

  • 표를 사용할 때는 Title 특성을 사용하여 표의 열과 행에 이름을 지정합니다. 또한 표를 왼쪽에서 오른쪽, 위쪽에서 아래쪽으로 읽을 때 의미가 통하도록 합니다.

  • 사용자가 선택한 서식 옵션을 지원하기 위해 서식이 지정된 텍스트 대신 실제 머리글 태그를 사용합니다.

  • 유용한 링크 텍스트를 제공합니다. 예를 들어, 텍스트가 "강의 1 노트를 보려면 여기를 클릭하십시오"인 경우 "여기를 클릭하십시오"보다는 "강의 1 노트"가 더 유용한 링크 텍스트입니다.

  • 특정 언어의 일반적인 텍스트 흐름에 따라 페이지를 탐색하는 기능적인 경로를 제공합니다.

  • 대부분의 개체에 Title 특성을 사용합니다.

페이지에 내게 필요한 옵션이 지원되는 컨트롤을 추가하려면

  1. 디자인 뷰로 전환합니다.

  2. 속성에서 DOCUMENT에 대해 다음 속성을 설정합니다.

    • Title을 "대수학 수업"으로 설정합니다.

    • BgColor를 Background로 설정합니다.

  3. 페이지 맨 위에 대수학 복습반이라고 입력합니다.

  4. 서식을 지정할 텍스트를 선택하여 강조 표시한 후 서식 도구 모음의 맨 왼쪽에 있는 목록에서 제목 1을 클릭합니다.

  5. 도구 상자의 표준 그룹에서 다음 컨트롤을 추가한 후 아래 표시된 대로 속성을 설정합니다.

    참고:

    페이지 레이아웃은 중요하지 않습니다.

    컨트롤

    속성

    값

    Image

    AlternateText

    대수학 수식

     

    ImageUrl

    이미지의 URL

     

    TabIndex

    0

    Panel

    ID

    Lectures

     

    TabIndex

    0

    HyperLink(Lectures 패널에 추가)

    ID

    Lecture1

     

    Text

    강의 1 노트

     

    AccessKey

    1

     

    href

    ~/Lecture.aspx

     

    TabIndex

    1

    HyperLink(Lectures 패널에 추가)

    ID

    Lecture2

     

    Text

    강의 2 노트

     

    AccessKey

    2

     

    href

    ~/Lecture.aspx

     

    TabIndex

    2

    HyperLink(Lectures 패널에 추가)

    ID

    Lecture3

     

    Text

    강의 3 노트

     

    AccessKey

    3

     

    href

    ~/Lecture.aspx

     

    TabIndex

    3

    Label

    ID

    TextbookLabel

     

    Text

    교재:

     

    AssociatedControlID

    TextbookLink

    Hyperlink

    ID

    TextbookLink

     

    Text

    대수학 복습(J. A. Smith)

     

    href

    ~/Lecture.aspx

     

    TabIndex

    4

  6. Panel 컨트롤을 클릭한 후 GroupingText 속성을 강의 노트로 설정합니다.

  7. 소스 뷰로 전환합니다.

  8. HTML 요소 내부를 클릭한 후 속성에서 lang을 en으로 설정하여 페이지 언어를 영어로 지정합니다.

    태그는 다음과 같이 표시됩니다.

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

GridView 컨트롤 추가

강의에 관한 정보는 GridView 컨트롤에 표시됩니다. GridView 컨트롤은 이전 단원에 만든 XML 파일에서 데이터를 가져옵니다.

GridView 컨트롤을 추가한 후 XML 파일에 바인딩하려면

  1. 디자인 뷰로 전환합니다.

  2. 도구 상자의 데이터 그룹에서 XmlDataSource 컨트롤을 페이지로 끌어 옵니다.

    위치는 중요하지 않습니다.

    XmlDataSource 컨트롤은 XML 파일을 읽고 페이지의 컨트롤에서 해당 데이터를 사용할 수 있게 만듭니다.

  3. XmlDataSource를 마우스 오른쪽 단추로 클릭하고 스마트 태그 표시를 클릭한 후 XmlDataSource 작업 메뉴에서 데이터 소스 구성을 클릭합니다.

    데이터 소스 구성 대화 상자가 나타납니다.

  4. 데이터 파일 상자에 ~/App_Data/Syllabus.xml을 입력한 다음 확인을 클릭합니다.

  5. 도구 상자의 데이터 그룹에서 GridView 컨트롤을 페이지로 끌어 옵니다.

  6. 속성에서 다음 표에 표시된 것처럼 속성을 설정합니다.

    속성

    설정 값

    ID

    SyllabusGrid

    DataSourceId

    XmlDataSource1

    TabIndex

    9

GridView 컨트롤 셀에 제목 추가

내게 필요한 옵션을 사용하려면 HTML 표의 열과 셀에 제목이 있어야 합니다. GridView 컨트롤은 런타임에 HTML 표를 렌더링합니다. 따라서 이 컨트롤로 렌더링되는 열에 제목이 포함되어 있는지 확인해야 합니다. 이 작업을 수행하려면 RowCreated 이벤트를 처리하는 코드를 작성합니다. 이벤트 처리기에서 GridView 컨트롤에 의해 만들어진 표 셀에 Title 특성을 추가합니다.

GridView 컨트롤 열에 제목을 추가하려면

  1. 솔루션 탐색기에서 페이지의 이름(Default.aspx)을 마우스 오른쪽 단추로 클릭한 후 코드 보기를 클릭합니다.

  2. 다음 코드를 추가합니다.

    Protected Sub SyllabusGrid_RowCreated _
        (ByVal sender As Object, _
        ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
        Handles SyllabusGrid.RowCreated
        Dim cells As TableCellCollection = e.Row.Cells
        If e.Row.RowType = DataControlRowType.Header Then
            cells(0).Attributes("title") = "Date"
            cells(1).Attributes("title") = "Topic"
        ElseIf e.Row.RowType = DataControlRowType.DataRow Then
            cells(0).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "date").ToString()
            cells(1).Attributes("title") = _
                DataBinder.Eval(e.Row.DataItem, "topic").ToString()
        End If
    End Sub

    protected void SyllabusGrid_RowCreated
        (object sender, 
        System.Web.UI.WebControls.GridViewRowEventArgs e)
    {
        TableCellCollection cells = e.Row.Cells;
        if (e.Row.RowType == DataControlRowType.Header)
        {
            cells[0].Attributes["title"] = "Date";
            cells[1].Attributes["title"] = "Topic";
        }
        else if (e.Row.RowType == DataControlRowType.DataRow)
        {
            cells[0].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "date").ToString();
            cells[1].Attributes["title"] = 
                DataBinder.Eval(e.Row.DataItem, "topic").ToString();
        }
    }

  3. 디자인 뷰에서 GridView 컨트롤을 클릭한 다음 속성 창에서 RowCreated 이벤트를 "SyllabusGrid_RowCreated"로 설정합니다.

    이벤트가 이벤트 처리기에 연결됩니다.

응용 프로그램 테스트

Visual Web Developer에는 내게 필요한 옵션 유효성 검사 기능이 있는데, 이 도구를 사용하여 웹 페이지를 검토하고 내게 필요한 옵션 지침을 만족하는지 확인합니다. 이 도구는 디자인 타임에 페이지의 HTML을 검토합니다. 페이지의 출력을 검토하여 ASP.NET 컨트롤에 의해 렌더링된 태그가 내게 필요한 옵션 지침을 만족하는지 확인할 수도 있습니다.

응용 프로그램의 내게 필요한 옵션을 테스트하려면

  1. 페이지가 디자인 뷰 상태인지 확인합니다.

  2. 도구 메뉴에서 내게 필요한 옵션 확인을 클릭합니다.

    내게 필요한 옵션 유효성 검사 대화 상자가 표시됩니다.

    참고:

    Microsoft Visual Web Developer Express Edition에서는 내게 필요한 옵션 검사 도구를 사용할 수 없습니다.

  3. 내게 필요한 옵션 표준 중에서 검사할 항목의 확인란을 선택하고 유효성 검사를 클릭합니다.

    Visual Web Developer에서 페이지를 검토한 후 유효성 검사 오류가 있을 경우 오류 보고서를 표시합니다. 내게 필요한 옵션 유효성 검사 보고서로 GridView 컨트롤에 의해 렌더링되는 표가 내게 필요한 옵션 지침을 만족하는지 여부를 확인할 수는 없습니다.

  4. Ctrl+F5를 눌러 페이지를 실행합니다.

  5. 선택키를 테스트합니다.

    이 응용 프로그램에서는 HyperLink 컨트롤에 대해 Alt+1, Alt+2, Alt+3 선택키를 정의했습니다. 선택키를 누르면 링크로 이동하고 Enter 키를 누르면 링크된 대상 위치로 이동합니다.

  6. 그래픽을 해제하여 대체 텍스트로 유용한 페이지를 만들 수 있는지 확인합니다. 이를 위해 다음을 수행합니다.

    1. Microsoft Internet Explorer 6.0의 도구 메뉴에서 인터넷 옵션을 클릭합니다.

    2. 고급 탭의 멀티미디어에서 그래픽 옵션을 해제합니다.

    대체 텍스트를 표시하려면 페이지를 업데이트해야 합니다.

  7. 중요한 지시 사항을 놓치지 않도록 소리를 끕니다. 이를 위해 다음을 수행합니다.

    1. Internet Explorer 6.0의 도구 메뉴에서 인터넷 옵션을 클릭합니다.

    2. 고급 탭의 멀티미디어에서 소리 옵션을 해제합니다.

  8. 스타일시트를 해제할 수 있는 브라우저에 응용 프로그램을 표시한 다음 스타일시트를 해제하여 페이지를 계속 읽을 수 있는지 확인합니다.

    1. Internet Explorer 6.0의 도구 메뉴에서 인터넷 옵션을 클릭합니다.

    2. 일반탭에서 사용자 서식을 클릭하여 스타일시트 옵션을 설정합니다.

  9. Microsoft Windows 고대비 옵션을 사용하여 페이지를 계속 읽을 수 있는지 확인합니다. 고대비 옵션을 테스트하려면 다음을 수행합니다.

    1. Windows에서 시작을 클릭하고 제어판을 가리킨 다음 내게 필요한 옵션을 클릭합니다.

    2. 디스플레이 탭에서 고대비 사용 확인란을 선택합니다.

    3. 모든 UI 요소를 탐색하여 색 및 글꼴 변경 내용이 반영되었는지 확인합니다. 또한 텍스트 뒤에 나타나는 이미지와 패턴이 생략되었는지 확인합니다.

  10. 지원되는 크기 중 고대비를 선택한 경우에만 사용 가능한 가장 큰 글꼴 크기를 사용하여 페이지를 계속 읽을 수 있는지 확인합니다. 이를 위해 다음을 수행합니다.

    1. Windows에서 시작을 클릭하고 제어판을 가리킨 다음 디스플레이를 클릭합니다.

    2. 화면 배색 탭의 글꼴 크기 목록에서 아주 크게를 클릭합니다.

  11. 브라우저 창의 크기를 조정하면서 페이지를 읽기에 적절한지 확인합니다.

  12. 키보드를 사용하여 웹 페이지를 따라 이동하면서 탐색 순서가 올바른지, Tab 키가 모든 링크로 이동하는지, Ctrl+Tab을 사용하여 창 또는 영역 사이를 이동할 수 있는지 확인합니다.

  13. 모든 텍스트를 선택하여 클립보드에 복사했을 때 문제가 없는지 확인합니다.

참고 항목

개념

ASP.NET의 내게 필요한 옵션 지원

ASP.NET 컨트롤 및 내게 필요한 옵션

기타 리소스

웹 응용 프로그램 보안 위협 개요

Web Content Accessibility Guidelines 1.0 (W3C)